Future of Coding

#35 - Democratizing Web Design: Vlad Magdalin

01/06/2019

Vlad Magdalin is part of the small group of us who can blame our life choices on Bret Victor.

Hey @worrydream, this is all your fault 😉

I saw your Inventing on Principle talk (https://t.co/fZDWqwBXZF ) and put in my notice at my job the next Monday. Now we're getting so much closer to bringing the power of direct manipulation to the web. Thank you!!! 🙇‍♂️ https://t.co/YtHoh5qc1L

— Vlad Magdalin (@callmevlad) October 10, 2018

Before Vlad had his “come to Bret” moment, he was a regular programmer working on “very exciting software like TurboTax and QuickBooks.” Then he saw Inventing on Principle and “it was like just a light bulb went on and it was just inevitable at that point. I couldn’t not work on what I ended up working on.”

Vlad and his brother had spent hours “doing a design in Photoshop and then manually translating” it to code, so when he saw Inventing on Principle, “It just felt like there’s got to be a better way. Even if we had it just for ourselves, we still wanted to make it happen.” Vlad quit his job, moved to the Bay, and started Webflow.

Unlike other website builders, Webflow decided from “day one” to “rely on browsers and open web standards to actually do the underlying work for us. That’s the concept of building directly for the medium that we’re creating for. We’re not building our rendering engine or our own layout engine. We would really have to be more right than the web platform for that to eventually succeed.”

Webflow is a prides itself on being a thin layer of abstraction on top of HTML, CSS, and JavaScript. It doesn’t magically get rid of the HTML, CSS, and JavaScript concepts, but it enables designers to utilize them without having “to know by heart all the different HTML5 tags… the web animation API, or some React powered JavaScript animation library.” Webflow is a direct manipulation GUI that compiles to semantic web code.

At first, they considered integrating as an extension to exsiting tools, like Wordpress, but realized that a patchwork solution wasn’t right for their audience. “It’s the combination. If you do them right, that actually becomes a lot more than the sum of the parts. It makes the things work so much more cohesively together that it becomes foundationally, or fundamentally, more accessible to people.”

Vlad sees Webflow as the future go-to soultion for small to mid-sized websites. “I think a lot of software will be created in this mid-tier, where they’re completely scalable on something with like a shared platform, but a few of the breakout ones, like the Airbnbs, like the Ubers, they might need to ‘eject’ and build a lot of stuff on their own. Just like Dropbox had to eject from AWS and build out their own servers… I totally believe that in the future, a lot of the initial versions of products will be completely created visually. If the platform does not support very complex use-cases, there will be ways to either augment that with code or eject and build that the traditional way.”

Transcript

Transcript sponsored by Repl.it

SK:
Welcome, Vlad.
VM:
Hey, Steve. It's great to be here.
SK:
Yeah, it's really wonderful having you. To get us started, I was doing some Twitter stalking of you, and I found that you have a lot of very funny tweets. You try really hard with the dad jokes.
VM:
Thanks, thanks. I only have three interns working on that content.
SK:
Just three? Wow. Really high quality stuff.
VM:
Thanks.
SK:
You recommended a good icebreaker, so I thought we might as well start there. Vlad, what's your story?
VM:
Interesting. Way to turn that around on me. Just kidding. In a nutshell, I was born in Russia, of all places, next to this mountain range called the Caucasus Mountains, so I guess you could say I'm very Caucasian, since that's the region ... and grew up there. Moved to Moscow for a little bit. My dad went there for a job he had, but then moved back down to very southern Russia on the border of Georgia, and had a very weird upbringing. My parents had ... they were Protestant, which is a religion that was looked down upon in Russia, the state saw it as not a very friendly thing to the state, so there was a lot of persecution happening. There are people in my direct family that were assassinated for having a Bible, for example, or just shot by a firing squad for having a Bible in their home.
VM:
That led to the U.S. government actually opening up some asylum laws in the late eighties that allowed my family to immigrate to the U.S., so when I was 10, we moved to Sacramento in California, and just had, I would say, a pretty normal childhood growing up there. Then went to school, followed my brother to computer science school, even though I didn't really enjoy it, just because my parents said, "We're already driving one of our kids, so if you want a free ride," in the sense of a car ride, not a scholarship or anything like that, " you should go to this school too," so I just followed my brother. And, computer science, at that school was really, really intense. We were learning how to write an artificial intelligence algorithm to play chess. And, for me, it just never really clicked, so I didn't enjoy those classes at all.
VM:
After the first year, I dropped out, and moved up here to San Francisco to go to art school actually. I wanted to become a 3D animator and just work at Pixar and make really awesome movies. I started going to the Academy of Art here in San Francisco wanting to learn 3D animation. But the first two years were actually just focused completely on fundamentals of graphic design and color theory and composition and perspective and sculpture and form, etc. I wasn't too good at that stuff. I could sort of learn the techniques, but I wasn't really personally motivated to go out and sketch people or just draw in my notebook, etc. But then, in the beginning of the third year, when I actually started to take 3D animation courses, it turned out that the school was actually pretty terrible at it. All the teachers were students who couldn't get jobs at studios and came back to teach, and I think I was learning more from video tutorials than I was from the classes.
VM:
And it was during that time, when I picked up a lot of these tutorials, that I got back into coding. Maya is a very popular 3D animation tool, but it has something called MEL script, which I think is called the Maya Expression Language, and, through that, I actually started to like coding, because you could save a lot of time animating by putting in this expression and the computer would do it for you. And that's when I started to develop this more of like a visual programming or visual orientation towards mixing visuals and development. Then I saw what it took to actually work at Pixar, and you have to be this really, really incredible animator on paper, traditional 2D animation, and you have to be super creative, and I just didn't have that, compared to a bunch of people that were going through animation at the same school. And I really started to fall in love with what I could do with code combined with this 3D stuff, so I decided to go back to the school where I was studying computer science, and I finished up the computer science program there.
VM:
When I went back to my computer science program, I also got a job part-time working at this web design agency that was creating these more complex CMS sites for Quicksilver and Apple and the Tennis Channel and all these big clients, and that's when I got into web design and web development and these things started to come together to push me a little bit further into creative programming. But then I graduated I went out looking for jobs, couldn't really find anything in the creative space, and I got a job at Intuit, which is known for very exciting software like TurboTax and QuickBooks, and you could say I kind of settled into that job. It was really fun. We did a lot of other projects as part of Intuit, but I, together with my wife, moved back to Sacramento. We started a family. We had two kids.
VM:
I had sort of forgot about this whole idea of creative development or visual programming, and then, one day, I saw randomly on my Facebook feed, Bret Victor's video, Inventing on Principle, somehow got shared on my feed. And as I was watching it, all these ideas came back, the concept of 3D animation and how it's very tied to direct manipulation and all the things that I was able to do with the programming side of things, and then the visual approach to procedural modeling with Houdini and how I was doing particle effects through that program, plus all of the things I was doing in that web agency came to a head and made me realize, wow, there's potential here to apply this same kind of thing to web programming. And then, that same night, I read a paper that Bret Victor has called Magic Ink, which the combination of that, the Inventing on Principle video and the Magic Ink paper, just convinced me that there's an opportunity there.
VM:
The next day, on a Monday, I put in my notice at Intuit. Started making plans to move to the Bay area. Called my brother, who was a designer, to see if he wanted to work on it with me. And then we, pretty much right away, a couple weeks later, canceled our lease in Sacramento, moved to the Bay area. My brother moved up to my place and then we just started working on Webflow pretty much day and night. And then, since then, it's just been working on what it's become, getting more customers, adding more features, getting closer to this vision of empowering more people to actually develop, even if they might not understand the exact principles or the exact syntax of the code that they're creating. Maybe that's not a short story, but that's how I got to where I am today in a nutshell.
SK:
I love it. I'm so glad I asked that question, because I don't think I would've gotten all of that if I asked a different ... I think that's the only way I would've gotten all that background, and that is stuff I didn't know, and I'm very glad I do now.
VM:
Awesome. Yeah, that's why I like that icebreaker.
SK:
There you go. That's quite a Bret Victor origin story, where you were settled, like you were saying, in this Intuit job, and then, like Morpheus, he shows up and he gives you the red pill and, all of a sudden, you can't see anything the same and you quit your job and you enter the matrix.
VM:
Exactly. That's exactly what it felt like. It was like just a light bulb went on and it was just inevitable at that point. I couldn't not work on what I ended up working on.
SK:
Yeah. I think there's a very small, in the context of the world, there's a very small number of people, but in the context of a video that changes people's lives very drastically, I think there's quite a large number of people who could say that about at least one of his videos, probably it's that one. That was the one for me. I still have the email in my inbox of, "Dear Bret Victor, I watched this video and I'm convinced that I should do this kind of work. What's your advice?"
VM:
Right, right. I have that same exact email. And it's funny. My email goes through ... there's many, many, many paragraphs of, "You inspired me. Thank you, thank you, thank you, thank you," and Bret responds with two words, "You're welcome," with a smiley face. It was so incredible to receive.
SK:
Yeah, yeah. That sounds like him. I'm not surprised. At least you got a response. It took me many years of cold emailing to get something back.
VM:
Nice. Yeah. He's got a lot of people that he's inspired.
SK:
Yeah, yeah. I imagine it's hard to be him, especially because he was telling me, when I eventually did get to meet him, that he thinks of himself as a contrarian, so it's hard when people watch his things and say, "I agree," because he doesn't want to be in the mainstream. He likes to be misunderstood. His only response, when you say, "No, I love what you do. I'm a big fan," is, "You don't quite understand what I do. You don't actually get it."
VM:
Yeah. Yeah. Yeah, yeah. And I could see that.
SK:
Well, I impulsively bought BretVictorFan.Club, the URL, so maybe you can be a co-founder.
VM:
Nice. BretVictor.Club, nice.
SK:
BretVictorFan.Club.
VM:
Oh, got it. Got it.
SK:
Yeah, yeah. It's important that we're the fan club.
VM:
Got it. I'll be your first member.
SK:
Great. Yeah. Well, we should probably make this website on Webflow. That would be the right way to do this.
VM:
Of course. Of course. Otherwise, first step to failure is not making a website on Webflow.
SK:
I think part of how we got connected was you had this tweet that used to be pinned on the top of your Twitter that was, "No. I was really inspired by this Inventing on Principle talk, so if you are too, reach out to me. I'd love to grab a beer with you, standing offer."
VM:
I need to re-pin that. I think I had some product that we were launching that I pinned something else, and then I couldn't find that tweet. But, yeah, I think I've met so many incredible people through that tweet. It's crazy that there's this common connection through this one video or through this one person that's somehow gets people together.
SK:
Yeah, I agree. It is pretty wacky. And I think I also saw on your Twitter that you ... this was a while ago and I wonder if it actually happened, a dinner for people who were democratizing coding in San Francisco?
VM:
Honestly, I'm behind on organizing it, but that is on the docket. I think it's just the end of the year has been really tough to schedule, but when January and February rolls around, I'm going to make that happen.
SK:
Amazing. Yeah. I just organized-
VM:
[crosstalk 00:13:52]-
SK:
Sorry.
VM:
I was just saying, yeah, there's just a lot more people now who are trying to democratize development in one way or another and make what is visual development or nontraditional forms of development happen, and that field, thankfully, is growing much more than it was several years ago.
SK:
Yeah. In your Tweet, most of the people that I recognized that you were going to do this dinner with were people who have companies like you that are trying to push forward coding, which is amazing, because in San Francisco you actually have a lot of companies like Dark and Replit and yourself that are doing this. In London, I hosted a dinner, last week, for people just more interested in this topic.
VM:
Oh, I saw that.
SK:
... [crosstalk 00:14:41] like side projects. It's just, I guess, a slightly different feel because we don't have companies, we're more hobbyists, more of an interest group, but it's quite similar.
VM:
Yeah. Well, I don't feel like I have to ... I hope it's not something that's just limited to people are running companies or whatever because there's so many different ways we can rabbit-hole into the specific things, whether, for Webflow, it's more website focus or for Airtable, it's more workflow focused, or for Zapier, it's more integration focused or whatever. I would want that dinner to be a lot more oriented around what's possible in the future versus techniques to optimize what we're doing now. I'm actually hoping it's a little bit more oriented around people's vision for visual programming and visual development and just democratizing coding in general, whether it's in the form of code or some other way of representing some abstraction of a code, so that we can all get inspired versus trading tricks and trades for reducing churn or getting more customers or whatever.
SK:
Yeah. Yeah, that makes sense. Yeah. Well, Amjad and I, as I guess you know, Amjad is the sponsor of the podcast, and Repl.it the sponsor-
VM:
Oh, awesome. From Repl.it, right? Awesome.
SK:
Yeah, yeah, yeah. Repl.it is the sponsor of the podcast. And-
VM:
Him and I actually need to get together because he responded to that tweet originally and we kept going back and forth, so this is a good reminder for me to ping him again after.
SK:
Yeah. Well, I was going to say, it's kind of related, these meetups I've been hosting in New York and now London, and then someone's going to do meetups in Boston, and Amjad said that he would be up for hosting the San Francisco based ones. Yeah. Anyways, in my dreams, it could be a thing you do at Dynamicland. I have a lot of friends who are into these topics in the Bay, so I would want to send them that way too, but I don't know how big you want to make it.
VM:
Yeah. I don't know yet. We just have to have the first one and see where it goes. The hardest thing is organizing people.
SK:
Yeah, yeah. Tell me about it. The London one, I thought it was going to take just a few hours to organize, but it was such a big project.
VM:
Yeah, yeah, especially busy people.
SK:
Yeah, you have to send around a Doodle to get everyone mark off when they're free.
VM:
Exactly. I had to upgrade to the paid version of Doodle. That's when you know you're serious about organizing, especially designers. You need the pro level of tools to get designers to show up to the same place at the same time.
SK:
Yeah. Back to your origin story of the founding of Webflow, it sounds like your brother was your co-founder, is that right?
VM:
Yes. It was my brother Sergie and one of my coworkers from Intuit, Bryant, that the three of us started it together.
SK:
Cool. And so, at the time, were there a lot of existing visual web development solutions? Because, today, there's Squarespace and Weebly and Wix, as competitors. Were those around at the time?
VM:
Yeah, all three were around. Weebly was pretty new. Squarespace had been around for a while. Wix has been around for a while. I think they were flash- based at the time though. We didn't actually see them as competitors really because you couldn't really develop your own thing, you could just pick a template and move content around, and that's pretty much where they are today. We didn't really see them as a competitor because you couldn't do anything really that custom without resorting to code.
SK:
Okay. Well, I think there's an interesting nuance there, because I've used some of these tools, and you can move things around, but, as far as the styles go, but you can't do anything custom.
VM:
Got it.
SK:
You have to use a template.
VM:
Right. It's not just style, it's also interactions. You can't, when you hover over something, create some sort of interaction or create animations. Those are the things that get closer to, when we were starting, you could only do in HTML and CSS and JavaScript and, in that space, there wasn't really that much competition, and we came in at a weird time in history, this was 2012, where Bootstrap was taking off. A lot of people were building Bootstrap builders, which are move vanilla, cookie cutter, similar to Squarespace where you're configuring Bootstrap elements. And most of the world, the startup world, was just assuming that the web was dying and everything was going into apps, so all the startups, even at Y Combinator and a bunch of investors were talking about, "Well, what's your story around mobile development? Mobile is really, really taking off. Everyone's getting a smartphone, etc."
VM:
The specific space of visual web development wasn't really that much in demand at the time. Everyone had assumed, pretty much everyone we talked to, that was even an industry expert, was like, "Well, this is probably not going to work out because Dreamweaver didn't work out or FrontPage didn't work out." It was a foregone conclusion that a WYSIWYG in the web platform space was a fool's errand, at the time. But we still, because my brother and I built so many websites together, we still felt very strongly that it was something that just needed to exist, that process of doing a design in Photoshop and then manually translating it just felt like there's got to be a better way. Even if we had it just for ourselves, we still wanted to make it happen.
SK:
Yeah, that makes sense. That distinction wasn't obvious to me before that those other tools, all you can do is just pick a CSS theme and that's it, and if you want customization on top of that, you have to go into the CSS or HTML or JavaScript.
VM:
Exactly. And same thing with the biggest competitor in this space, which is WordPress. Essentially, what you get out of the box with all these tools is a CMS. Any customization of how things look and how a user interacts with them are all done through HTML and CSS and JavaScript. You're manually coding.
SK:
Yeah, that distinction makes a lot of sense. There are some key words that you've used a few times that I think are quite important, so I want to just get your definition of these terms. One is direct manipulation, which, I think, is a hard term to pin down, and the other one, I think, is a little bit easier. It's WYSIWYG. Yeah. What are your ... Yeah, sorry.
VM:
Direct manipulation, to me, just means that an action that you take has a direct response with the medium that you're creating for. If you're sculpting, for example, or chiseling at some stone, hitting your hammer against a chisel immediately has, maybe there's some microsecond delay or whatever because of physics and whatnot, but it immediately has an impact on that medium. Or when I'm modeling a character in 3D animation software or I'm using graphic design software where I'm using the pen tool, me moving the vertex, I don't have to wait or I don't have to switch to some mode to see the result of that operation.
VM:
Whereas when you're lacking direct manipulation, you actually have something where you have to make a guess and then go check whether that is what you intended, which is pretty much where most of web development and application and software development is today, where you are in a text editor and you change something and then you have to go into a browser and refresh or wait for library load to happen to see if that's exactly what you meant. That's the lack of direct manipulation and it's like the wait and see type of approach. But when you have direct manipulation, you actually have this very tactile connection to the thing that you're creating and, when it's missing, you have to find all these work arounds or get used to the fact that the thing that you're writing or the thing that you're declaring is not the actual thing that you're building, and that absence makes this just feel more like a translation rather than a creation. That's how I see it.
VM:
When you add direct manipulation to something, it's like switching between Markdown to something like Word or like Google Docs where, in Google Docs, what you're seeing is exactly what you get. Whereas in Markdown, it's like a abstract representation of the thing you're going to get, and then you have to go switch back and forth into preview mode to see if that's how you intended it to look.
SK:
Yeah. Well, I want to keep digging in here because I want to tease out the difference between direct manipulation and live programming. And so live programming, I'm just going to say, is when you get very quick feedback. You can imagine a Markdown editor where, on the left, you have the markdown and, on the right, you have the preview, and as quickly as you type, you could see the preview. And so that's not direct because, when I think of direct, you mentioned the stone, I think of direct as my hands or my fingers are in the clay and I can feel the wetness. That's very direct. And so I'm with you that Word feels more direct because I can point at the words. But still, with Word, I select the word and I have to go and pick a number to represent it. I don't actually drag the word bigger. It's still not as direct.
VM:
That's true. Right. Yeah. There's a mixture between both. There's some virtual reality sculpting programs where you're not actually changing the thing, you're not touching the medium, but you're virtually representing that physical interaction. But even in those cases, the way that you pick a color, you're still in a modal or something like that. There's always a mixture. When you're mixing paint on a palette or whatever, it's not exactly like having a preselected color and then putting it on a canvas. There's always some modal offshoots of that direct manipulation idea.
SK:
Yeah. The modal offshoots of picking a font or a color is one thing, but then the other thing, that I feel like it's hard to get at, is how direct is direct or what kind of an attribute is direct? Is it a spectrumy thing or is it a binary thing?
VM:
I think it's definitely a spectrum. For example, in a lot of things that you would consider to be ... let's say, Houdini. I don't know if you've ever used Houdini for particle effects.
SK:
No.
VM:
It's similar to Markdown where you might have a procedural flow diagram of I have an emitter, I have a gravity well, I have different sources that I put my particles through, and then, on the right side, I have the actual particle effect, and I can see this is what I want, this is the gravity, this is how I want it represented. And then, in some cases, there's even a third step of actually rendering that out to seeing fire or smoke or whatever. There's definitely a spectrum where the closer you get to your main input being the representative of the output product, the more direct that that feels. Whereas, let's say, I'm writing a shader for some game, and I'm expressing that through C++, that feels less direct to me because that means more translation layers to that code now becoming an algorithm that becomes some way to represent light bouncing. You're more and more steps removed from the final output.
VM:
I think the closer you are to your expression of an artistic or creative idea to that final output, the more direct that feels, but it's almost never like sculpting in itself because that's like finger to clay, and exactly what you do is what you end up with. I don't think visual software development, especially, can ever be that direct because the things we're trying to express are so much more complex, you have to come up with these abstract representations of "directness". But I think the goal should always be to get it closer and closer to what you're trying to represent, if that makes sense.
SK:
That makes a lot of sense. Let me just try putting it in my own words because I like what you just said. When you're doing some activity to build an artifact, and so when you do the activity, you have to go check the artifact to see if it's what you imagined and, if the thing that you're checking, the actual preview or the output, is also the thing you're interacting with, that's direct manipulation. The Markdown thing, it's not because it's off to one side, but, Word, you're more directly interacting with the thing you're also checking. I think that's, at least to me, makes sense.
VM:
Yeah. I would say, in some world, maybe even something like Markdown would be close to direct manipulation if you have true reflection of the thing that you're creating right away, like if there's no delay and that is the most efficient way of declaring that, I guess, the abstraction that leads to the end result. For example, I'm thinking, let's say I'm 3D modeling and I'm choosing a color. Even though I'm not choosing that color directly, like in some modal, as long as I'm choosing that color and dragging around the color picker, and I'm seeing it immediately reflected on the medium that I'm creating for, like the actual model, that feels pretty direct to me. I think qualifying it as whether I'm choosing that color directly on the object versus somewhere on the side, as long as I'm seeing the result right away, immediately, without some sort of lag, that feels pretty direct.
VM:
It feels like it would be too maybe pedantic to say that's not exactly direct, because the influence of your action is very direct. It happens right away, and you know right away if that's what you meant. You don't have to go and wait for anything or think of it as an abstract representation. You're just thinking of that as the color of the thing that I'm creating, which is part of the thing that I'm creating.
SK:
Yeah, yeah, yeah. I definitely see that. I guess, just to be pedantic about it, I think that in that example, the color being updated in my actual output as fast as I change it is what I would call live programing.
VM:
Yep.
SK:
Then if I could press on the thing on my 3D model that I want to change, and that's how I get the color picker, I don't feel like looking the code and then find the color picker. I just press on the thing who's color I want to change, that's the direct part for me.
VM:
I like that distinction. I actually wasn't like ... The live aspect wasn't in my vocabulary before. That distinction makes a lot of sense.
SK:
Okay, cool. Anyways, we can move on. It is very pedantic and I could see how it would be pedantic, particularly when you are trying to make things that people would use. As myself, being more of a researcher, these are the terms that we use and debate. What does it mean to be direct?
VM:
Right, right, right.
SK:
Given that you are such an expert on direct manipulation, I figured you would be the perfect person to help disambiguate these terms.
VM:
If I think about, let's say the markdown, you have the markdown code on one side and the live preview on the other side, that's when you can start to make a judgment call on efficiency and ease of use. Even though you have the live translation right away, you could argue that you can actually teach a lot more people, maybe orders of magnitude more people, if you had something like content editable or something more like Google Docs, to be to directly change that right side.
VM:
Even if you have that live translation, you could argue that the direct version is a lot easier for people to understand, and therefore more accessible, than the live translation portion. Then that means you just have to learn another format, you have to learn another, different, more technical way of expressing things. Yeah.
SK:
Yeah, yeah, definitely. I think most people agree with direct manipulation is better, and live is better. Once you understand what the terms mean, I think most people agree that they're what we're going for.
SK:
Actually, that brings me to my next question. You've spoken elsewhere about the democratization of various creative pursuits, be it blogging or animation, or modeling. Basically any creative pursuit that we could think of or that we have, there is some tool, some professional editing tool, and maybe even some amateur tool, where it's like direct manipulation-y, and allows you to do this creative pursuit without having to worry about code. Programming has been, particularly web design, has been resistant to that sort of a tool. I was wondering if you could talk about why do you think it has been so resistant?
VM:
That's a great question. I think the major ... I think there are two factors. One is web programming actually wasn't hard enough in the beginning. Many people found it pretty approachable, when you could just buy a book on HTML and learn how to create pretty basic website with tables and frame sets, or whatever. It wasn't enough of a thing where it was so tedious that it just screamed out for tooling.
VM:
Whereas, something like 3D animation or video editing, it would be so tedious to declare where every pixel goes, or where every vertex goes, and where every cut happens. It just, like very early on, people just saw that as the only meaningful way to get work done here is to create more sophisticated software to help us do this.
VM:
Web design started as a much easier technical challenge. I think enough people over the first five years or so became experts at it, that it just became a foregone conclusion that everything that you could do in web design, you could do manually. It's straightforward enough that it doesn't take to long, and that kind of thing.
VM:
Then, overtime, as web development got more and more complex, that mentality stuck. You needed that experience of the initial foundations of HTML, and CSS, and JavaScript to do the more complex stuff. The only people that could do that were the already experts. Nobody could prove that you could do it any other way, because we had multiple failures in this space, like Dreamweaver.
VM:
Dreamweaver tried to add some direct manipulation features to web design. Then the outcome of that was like every one of these pro-developers would say, "Generated bad code," which was true. It sort of became a self-fulfilling prophecy, where because most of the experts thought you couldn't actually do professional work with it, nobody new would start using that as the defacto tool. All the experts and thought-leaders said, "The only real way to do this correctly was to learn code from scratch," etc.
VM:
I think that played out over decades and led to this conclusion that the only real way to do things correctly on the web is to learn all the foundations and do all the technical groundwork yourself. Which almost feels like sticking to the conclusion that Assembly is the best way to do programing. Sort of like, "We don't need any more abstractions to help us make sense of this complexity. We reached the apex of the tooling that we can create."
VM:
I think it was a combination of multiple factors. I think the biggest one was that the industry leaders were ... and still to this day. You ask most industry web design leaders what they think about WYSIWYG, they'll dismiss them out of hand right away. They'll say things like, "Just do what I did. Learn the fundamentals of HTML, and CSS, and JavaScript, etc." Forgetting the fact that it was so much easier to do this when the web was first getting started. You could incrementally learn these things as browsers got more and more ... as CSS came out, as CSS2 came out, as these new tags started to happen with HTML5, as jQuery came out.
VM:
All of us industry experts that were doing this from the early years could incrementally learn these things. It didn't seem too hard. However, somebody starting new from scratch today, it's such an overwhelming mountain to climb. There's hundred of ways to write CSS. There's many different compilers that compile the HTML, many different approaches to JavaScript and JavaScript frameworks. It's just this paradox of choice of tooling, and this overwhelming wall that you have to surpass.
VM:
Most people end up not getting into the space, or hyper-specializing in something. They become a React developer, so only building UIs. Or they become an angular developer, where they're focusing more on business logic, or creating forms, etc. It's no longer ...
VM:
A lot of industry experts will say, "It's unlikely that you can become a master of everything." There's just way too much stuff to master now. I think that is actually ... The more we ask computers to do for us, the more it's possible for us to master things. Then we just have to understand the core concepts.
VM:
We have to understand, roughly, how the box model works. We don't need to actually understand all the syntax of expressing things that rely on the box model. We have to roughly understand how search engine optimization and accessibility works. We don't actually have to know by heart all the different HTML5 tags. We have to roughly know the principles of timed animation. We don't actually have to know by heart the web animation API, or some React powered JavaScript animation library.
VM:
As long as we can create tools to actually access that same level of power, I think all that stuff is possible. The biggest barrier is just overcoming this mental gap of believing that it's actually possible. Most of the industry, I would say, does not believe that it is.
SK:
Yeah. I have two things to say. The first thing that I want to say is that I really love the way you put it. That, you don't have to know the syntax for doing certain things. You only have to know the higher-level concepts of how they work. I really love that distinction. It's another way of framing what Fred Brooks calls the essential complexity versus the incidental complexity.
SK:
You're not saying that we're going to have users describe their UI abstractly and have some machine learning AI figure it out for you. We're saying, "No, no, no, no. You still have to understand the essential nature of the problem you're trying to express. You still have to understand visual design, if you want to make a good-looking website. You don't have to understand all the things that we could just write down for you, all the curly braces and semi colons. We'll get that stuff. You just focus on the actual essential bits."
VM:
Exactly, yep.
SK:
The other thing I wanted to say was that you mention that the perception of programming, and programming tools, and WYSIWYG, that's been a big block for you. I'd be curious, you've been doing this now for six years, I'd be curious how that's been going? The different strategies you've been taking?
SK:
One thing I'll throw in there is that I did an interview with one of the founders of Bubble, which I assume you're familiar with. He called this a slow revolution, where the only way that people are going to realize that this is legitimate is when other companies become bag successes. When the next Uber is built on top of Bubble or Webflow, that's when people are going to take these tools seriously. Would you say that the same has been true?
VM:
Absolutely. It's all about social proof. It's all about showing people versus telling them. We've had the same thing. Year one, there was a lot of skepticism. Year six, when we can point to Webflow.com, which is 100% visually developed by a graphic designer who doesn't code at all. Our sites, the amount of animation and interaction happening there, in some cases outpaces what some of the best front-end developers can do.
VM:
When entire companies switch their entire marketing sites to Webflow. There's now HelloSign, and Lattice, and a bunch of other YC startups, like best-of-breed type of start ups, that switched all of their marketing operations to this new visual way of building webpages and applications. That's when you can say, "Look, the proof is in the pudding. You can actually ... "
VM:
It is absolutely a slow revolution. Even with those proof points, you get a lot of yeah, buts. Like, "Yeah, but it doesn't do this." "Yeah, but it doesn't do this." "What if I need to pull the escape hatch and do something custom?" I think that's just the matter of adding more and more functionality to the tools that we're creating. Like just say four months ago, it was a legitimate thing where people could say, "Yeah, well, Webflow abstracts HTML and CSS, but one of the new technologies is CSS Grid, you're team, or your product doesn't support it." Which was a completely valid criticism, because we're behind the curve a little bit around what's actually available in browsers.
VM:
Now, that's not true anymore. We have fewer and fewer things that people can point to as examples, where we're behind what's actually possible with the web platform. I think it is absolutely just a matter of time. Absolutely a function of more and more people adopting the technology and showing what's possible with it.
VM:
We have some people who have started entire companies without developers, and gotten funding because they were able to build proof of concept or everything they needed to build and host on Webflow. Those, the more of those that we can get, the more we can inspire others to not assume that they need a developer to do development. Sometimes you can learn how to visually develop yourself.
VM:
The more of those proof points you have, it starts to snowball. We're still very much in the middle of that slow evolution. It's nowhere near to snowballing yet, but it's a lot closer to it than it was five years ago.
SK:
Yeah. I wanted to talk about one of the design choices you made with Webflow, one of the technical design choices.
VM:
Sure.
SK:
It seems like Webflow is a very thin abstraction layer over HTML and CSS. For example, you brought up the CSS grid abstraction, which I've seen a lot of really cool demos of on your Twitter feed and little gifs, or maybe some videos. It's really impressive. It seems like you guys really think the CSS grid abstraction improves the tool.
SK:
Part of the question is why didn't you build that abstraction before CSS grid existed, and then just manually compile down to some HTML/CSS thing that didn't exist? Basically, why didn't you implement your own CSS grid, if you had the idea? Why are you waiting for HTML and CSS to do the thing and then abstract over it? Why don't you just build the right abstraction and then compile down to whatever HTML and CSS supports now?
VM:
That's a great question. A couple answers to that. One is that we fundamentally believe that the web platform will win over the longterm, just because there's so many proof points over time. This open technology that gets consensus and agreement across many different companies, even though it takes a longer period of time, tends to absorb all of these great technologies from mobile, from Flash, etc. Which seemed to, like when they first start to create ...
VM:
You know, Flash had it's own custom layout engine which is a lot more flexible, they seem to be more flexible initially. But then, stuff starts to break down. Like screen readers don't work, or search engines don't work with them. There are performance issues with doing a layout when it's not built into the browser. It just goes a lot slower.
VM:
We have kind of made that assumption from day one, of like, "Where we can, let's rely on browsers and open web standards to actually do the underlying work for us." That's the concept of building directly for the medium that we're creating for. We're not building our rendering engine or our own layout engine. We would really have to be more right than the web platform for that to eventually succeed. Even if it does succeed, then we create this walled garden of, "This layout engine only works on Webflow," or whatever. We have to have our own runtime.
VM:
The bigger, more practical answer to that is just speed. There were a couple grid, or grid-like layout engines. Some based on Apple's, I think it's called auto-layout, and there's something called GSS, Grid Style Sheets, which are JavaScript based, they were just way too slow. You have to do a lot of work to essentially re-layout the page as content is changing or animations are happening.
VM:
Whereas, browsers, when they build it into their engine, they have much closer control, sort of like "to the metal," where they can hyper-optimize things like layout or repainting, etc, where the user experience, it just feels so much more native. That takes a lot of work off of our plates. By creating a visual abstraction over something that's already there, A, makes our job easier.
VM:
I think it also makes the work that people create in our tool a lot more long-lasting. You can always pull the escape hatch if you need to. What you get is standardization on CSS and JavaScript, which you can run anywhere. You can take over and start maintaining it yourself, but it's open web standards. There's nothing magical about it. That inspires confidence in our users, because it means that you don't feel trapped in something that one company is doing. Like, "What if our layout engine starts to not become performant?" Or whatever ...
VM:
I think there's just more confidence in us, saying, "We're following the accepted web standards, even if it means waiting a little bit longer to do that."
SK:
Damn. That was the best defense of open web standards I've ever heard. So great. You're a real fan.
VM:
Yeah, thanks.
SK:
Do you contribute to web standards? Or is that something you see yourself or your company doing down the line?
VM:
I think we've been a part of several conversations. One recently around styling scroll bars. We were pretty early in the CSS grid discussions with the company that was implementing it in Safari and Chrome. It hasn't been a direct type of involvement, just because we don't have anybody on the committees.
VM:
We've definitely commented quite a bit on some of the proposals and shared our perspective. I think our company has been at too small of a scale to participate in those larger vendor discussions, but definitely something we see ourselves being more involved in going forward.
SK:
You mentioned this phrase, "Walled garden." It's related to this other question I have for you. It's also related to this tweet. I keep referencing your Twitter feed. I think someone contacted you on LinkedIn saying, "You're building the Salesforce for web development." I think they were talking about how Salesforce is this platform that's very plugin-able, and everyone just built on top of Salesforce.
VM:
Yep.
SK:
It's wonderful if you could pull off the platform thing and then everyone integrates with you. Anyway, I'm doing a bad job of articulating the question. I'm talking around it. It seems to me like Webflow is a walled garden in that it's a single, cohesive system, your one-stop-shop for web development, CMS, maybe more. Then I'm sure you're going to open in like a plugin-y system at some point, if you don't already have one.
VM:
Yep.
SK:
I don't know, I'm just curious if you've considered a different alternative where you, instead, focus maybe more on what you're good at and then integrate with other tools that do what they're good at ...
VM:
Sure.
SK:
... and have more of a patchwork solution?
VM:
Sure. We considered that, for sure. At the end of the day, what it comes down to is the user experience. When we first considered integrating our visual tools with the CMS, for example, the obviously answer was, "Hey, build an extension to WordPress." Take something that takes your visual chops and extend it to a CMS platform that already exists, especially one that's opensource. We actually created some prototypes around that. What happens is, by approaching it in a piecemeal, patchwork way, you have essentially sum of those two things. You have a good CMS, and you have a good visual layout engine, or like a way to build templates. It's the combination of the two, if you do them right, it actually becomes a lot more than the sum of the two parts. It makes the two things work so much more cohesively together that it becomes foundationally, or fundamentally, more accessible to people.
VM:
For example, right now we have what we call visual CMS. You design the entire content model, sort of like your graph of what objects you're representing and how they relate to each other. Then, when you're building the visual for it, you actually can visually bind to that data. That's not something you can do when the two systems don't really understand each other that well.
VM:
By having control over how the data is declared and the schema around that information, and exactly the structure, and the source, and the performance characteristics of that, the shape, everything around how that data's accessed and how it's stored, you can very, very easily marry it to a visual design and provide this super- seamless visual development environment, where you can tie visuals to data. I think the result of that is 10 times better than just having a CMS and having a visual template editor in isolation that are sort of integrated together.
VM:
Same things goes for, we're now working on things like multi-language and components, and eCommerce, where just having a feature ... Like let's say we had eCommerce, where we took our visual language and made it as a Shopify extension. You have all these translation steps between the two platforms that just don't feel very natural. Whereas, in Webflow now, with Webflow commerce, you can literally drag in a checkout page and make it look however you want, or like a product grid. You're directly manipulation your layout of products, or like the product detail page. You don't have to worry about how it would actually integrate with an eCommerce platform. It just works.
VM:
The think you're declaring just works out of the boxes. You just press the button and it goes live. You hook it up to your Stripe account, and everything just works out of the box. It's more of the very ... like think of it maybe as, I don't know if you have an Apple device?
SK:
Yeah.
VM:
Let's say you have something like email. Email is a federated way that you can send a photo to any person in the world, no matter what device they have. If you use AirDrop, it just feels so much more natural. You're close to a person, you literally hit AirDrop, you've just given them all the photos from your device. It just feels like it takes like a second versus a minute-long process.
VM:
That's only possible because those devices understand each other. It's just like a very, very integrated environment. I can do that to my Mac. I can do that to my iMac at home. I can do it to my daughter's iPad, etc. It's just like the fact that those systems understand each other just makes the user experience so much more fluid, that I don't think it's possible when you have this hand-off or integration type of workflow.
VM:
That's a decision that we made, based on user feedback. We just found so much more success with people thinking of those things as one thing, versus the combination of many different solutions that are patched together. I don't know if that answers the question. To us, it's all about user experience. We try to keep thinks in a way where everything around what you're building in Webflow, like all your data, your layouts, your HTML, your CSS, your JavaScript, your actual stuff you put in the CMS, you can take it and put it anywhere else.
VM:
Of course, you're not going to get all of the ecosystem effect, from everything working well together. It's not like you're completely locked in. Almost like you are with Facebook. Facebook is not going to take your ... They'll let you download all your messages, but you can't just move them to something that's a similar functionality. They're not to port your stuff to some other social network. It has limited value.
VM:
The things you build with Webflow, you can actually take the majority of it and adapt it to some open-source CMS, or whatever. You don't have to throw out the baby with the bathwater, in a sense.
SK:
That strategy makes a lot of sense. I guess one outcome of doing it all yourself and slowly growing the product to do more and more things, to encompass more and more of all the things you just want to do, I'm curious, when will it stop? Now, you have companies that are turning their whole marketing sites into Webflow sites. Will the next Airbnb or Uber or Facebook, will the next website, billion dollar, YC company, will one of them, will one day they be created in Webflow?
VM:
I think the first versions of them could definitely be created in a future version of Webflow. When we add things like a plug-in ecosystem, user context, like more backend-y visual development flows, I can definitely see where the initial version of Airbnb, or like an initial Twitter would be created and validated on Webflow. Then, potentially even scaled with Webflow.
VM:
The vast majority of software that's created is like CRUD-based. It doesn't have the type of scale that these startups do. I think a lot of software will be created in this mid-tier, where they're completely scalable on something with like a shared platform, like a few of the breakout ones, like the Airbnbs, like the Ubers, they might need to "eject" and build a lot of stuff on their own. Just like Dropbox had to eject from AWS and build out their own servers.
VM:
Those startups are very few and far between. I totally believe that in the future, a lot of the initial versions of products will be completely created visually. If the platform or the foundations on which that visual software runs does not support very complex use-cases, there will be ways to either augment that with code, where it's front end or backend, or eject and build that the traditional way.
VM:
I do think more and more software, if not the majority over the next decade, will actually be created in a more abstract way, where you're not writing all the rails or node handlers on the backend. We're going to move closer and closer to like a Zapier-like or Airtable-like, a more Webflow- like visual expression of business logic, and UIs, and components, where a lot of the translations steps are just removed from the equation, because they're just that tedious translation. We need to focus more on the actual solving business problems.
VM:
If you can imagine Webflow the way it is today, when you submit a form, just adding some functionality where a user, some designer, can map what those fields go to in the CMS, you have essentially created a CRUD- based application, where a user has user-generated content. They fill out a form, it goes into the database. When you refresh, that is now available on the website.
VM:
Then you augment that with something like user context, where users can log in and actually see content that's relevant to them. Then you're already pretty close to migrating what looks like a website to web application. You're already pretty close to creating things that we think of as full-on applications to being completely possible, visually. It's definitely not outside the realm of possibility that entire startups will be created on Webflow. Whether they stick on the platform or not just kind of depends on their needs as they scale. That's something to figure out in the future.
SK:
Fascinating. Yeah. That distinction you make between ... It sounds like you're very much going after the middle- market, or even the lower end of the market. You're letting the big guys eject from you.
VM:
Yeah.
SK:
I think there are tools that exist that you or I, maybe you know about them, but I think most people don't, that are just for enterprise companies. The Fortune 500 companies have website builders that SAP has made for them. The rest of us don't know about those tools, and you're going for the opposite market.
VM:
Yeah, yeah. We're trying to enable software creation that's not being created today. Right now, somebody might have an idea. I'll give you an example, one of our product designers launched a podcast directory, a searchable podcast directory of the top rated podcasts, in his opinion. You could say that's a product. It was on Product Hunt. It's a piece of software that has a database. You can search the stuff. You can rate by certain things.
VM:
You could argue that that software would have never have been created because this person doesn't know how to code.
VM:
I think what we're trying to enable is giving people this ability, sort of like democratizing the act of creating software to where most of it is not an alternative to something that they can already do today. It's actually the first ... It's an empowerment of them being able to do something now that they weren't able to do before without significant capital or hiring somebody else or learning how to code, et cetera.
SK:
That makes a lot of sense.
VM:
It's kind of like what Excel did to Excel did to Pascal. You know? A lot of people, when spreadsheets came out, it's not like all the Pascal programmers jumped to that and said, "Oh. I'm going to do all of my computation on ... with this visual expression of kind of like expressing computation." It actually empowered 10 times if not 100 times as many people to actually, even if it's in the limited sense, to get a computer to do calculations for them, and depending on how you define giving instructions to computers, Excel could be considered the most popular programming language, because it's used to sort of extract computational power from a computer in a very specific type of way. In some ways, entire businesses are based on Excel spreadsheets and formulas and calculations and stuff, but it's ... It created this new, completely new way of getting people to "program," but it wasn't necessarily like a replacement of anything.
SK:
Yeah. I really like that distinction, and it reminds me of someone else I interviewed on my podcast, Joe Cohen of this company Universe.
VM:
Oh. Yeah. Yeah.
SK:
Are you familiar with the Universe? It's a-
VM:
Yep. It's like a grid-based iPhone app to make websites. Yeah.
SK:
Yeah, and it seems like a lot of the people who he has on his platform are people who never, in a million years ... I don't even think that they would have gone to Webflow. Even that seems too complicated for them.
VM:
Yeah. Exactly.
SK:
These are people who need to be on the bus to be able to make their website, because they don't have time, they don't have a desktop computer, or whatever it is. They ... I think he, like you, are enabling people. They're enabling the things that never would have been created on any alternatives.
VM:
Exactly. Exactly. That's exactly ... It's empowerment to express yourself, whether that expression is your personal, in the case of Universe, your personal kind of identity on the web and how you want to be perceived and what you want to say about yourself, to being able to express some idea for a website or even a product or a bit of software. Those things would have not made them ... would not have kind of formulated into reality had these kind of tools not existed to empower those people to do that.
SK:
If you'll allow me, I want to be a bit pedantic again about something that you said.
VM:
Okay.
SK:
Is that all right?
VM:
Of course.
SK:
You mentioned how if you consider giving instructions to a computer programming, then Excel could be one of the most popular programming languages out there, and so I, too, have defined programming that way, because all the time, especially when I was teaching programming, people would ask me, "What is programming?" That's a hard question to answer. I've since learned, because I started dating someone who is an artist, and everyone always asks her, I used to ask her, "What is art?" because it's really hard to define. It turns out, every field of study or expression is hard to define, but let's stick to programming. What is programming? I think most people will agree that you have to be pretty abstract when you're talking about what is programming, and giving instructions to a computer is probably basically what you want, but then...
SK:
People will be like, "But wait a second. Where is the line? Is sending my emails on Gmail, is that programming?" It took me a while, but finally, my answer to this question is yes. Everything you do on a computer is programming, it's just not a very good programming language. Gmail is not very composable. It's not very expressive. It's a very ... It's not Turing complete. It's not a very good programming language, but it is. How do you feel about that?
VM:
That's interesting. I've never had it kind of expressed that way. I would say programming is the act of somehow declaring instructions that are then replayed in some way. In Gmail, to use that example, I think creating a filter feels kind of on the edge of programming, whereas sending an email is the execution of somebody else's instructions for what to do. Right? When you create rules for a computer to follow, whether it's creating a Zap in Zapier or creating a workflow, kind of a diagram in some help support desk software or whatever. That feels like programming, because you're saying, "Hey, computer, next time this situation happens ... " Or even going to a text expansion program or your iPhone and declaring rules that say when I type this, do this, that feels like kind of like what I would define as programming, whereas that ...
SK:
Oh. Interesting.
VM:
Let's say you have a Amazon Echo device, where you're saying, "When I say this word, turn on my Christmas tree. When I say this other word, turn off my Christmas tree." When I create those rules, I'm programming. When I execute that program and then say those words, I'm actually now just giving it commands, and those instructions are executing. It feels like that's the distinction to me. Creating the rules, that's programming. Executing on the rules is more of, like, the use of that programming.
SK:
I see, and this really fits. I like this distinction a lot. The distinction is deferred, like whether or not it's happening now or later, and I think that fits with people's conception, because if you think about the word ... I mean, programming. It's like preprogramming something. It's like setting it up, and then later, you're maybe ... you're using something that was preprogrammed, and so, yeah, the programming is, it's the setting it up. If you're ... I guess, to take your email example, when you're sending emails, you're not programming. Let's say I'm in code. I've authenticated ... I'm in a Python shell, and I've authenticated to some Gmail API with my Gmail credentials, and I write an email in the shell, and I hit send. Most people would call that programming, because it looks like programming, but maybe you would say, "No, no, no. That's just using ... That's just sending an email by another name."
VM:
Yeah. That's maybe scripting. You're just sort of doing a thing by a different way, but you're doing it once. If I was to write a program on my computer that says ... I write this command to email and then some name or an email and then the message, I'm sort of ... The act of creating that command or that program that executes on that is programming, but actually executing that command feels more like, I don't know, utilizing that program. I don't know. It's kind of ... It starts to become arbitrary.
SK:
Hmm. No, no. I think, to me, you've come up with a very clear distinction. Programming is just setting up a computer, and then ... Setting up is very clear, and then any time you use a computer, that's not programming. That's just ...
VM:
Yeah. Yeah.
SK:
Cool. Yeah. I'm glad we went down that rabbit hole. That was fun.
VM:
Awesome.
SK:
I have a cheeky question.
VM:
Okay.
SK:
Bootstrapping. Will Webflow every be built inside of Webflow, and not just the marketing website for Webflow, but the actual tool itself.
VM:
I think maybe at some point, very, very far into the future. There's a lot of parts of Webflow we already build in Webflow, for example, a lot of our e-commerce product. All the user interfaces were actually declared by one of our product designers inside of our tool, which is actually kind of confusing, because when you look at this designer's design surface, you actually see Webflow twice, all the tools, and then you see them again on the actual canvas, which can get really confusing. All of the visuals were built with Webflow and then sort of like perfected in React or whatever, so it's moving closer to that world, but I think we're still pretty far away to building the entire thing.
VM:
It's almost like the best 3D printers these days are not 3D printers that can replicate themselves. You get so much more quality by kind of like using materials and using kind of like the types of precision that is not, "replicatable," but I think, at some point in the future, more and more of these things will be able to be expressed visually. I still think there's going to be massive amounts of manual code needed to build out these tools and build out more complicated software, so it's very, very early to try to say when or if, even, entire tools like Webflow will be able to be created completely in Webflow.
SK:
The 3D printer thing is hilarious. I've never heard of that, or it never occurred to me that a 3D printer could build a 3D printer, and then, once it does, we've reached the robot apocalypse, because there's no stopping them.
VM:
There are 3D printers that can actually build all the materials to rebuild themselves, but they're usually the ones that are less accurate. It's more of like you're just doing that out of kind of like the novelty sake, but the best ones are definitely the really, really kind of complex ones that can't rebuilt themselves.
SK:
Well, that's so cool, though. I feel like someone, just for fun, should make a project where you have a 3D printer, it prints all the pieces for itself, and then you also have a robot that's able to put it together. Then, you just have this video that goes on. As long as you have input materials, you just have this robot just go down the line making things that make themselves, and it's exponential, because, of course, once you have two, they can both make two. Then, once you have four, they can make eight.
VM:
Right. That would be hilarious. Yeah.
SK:
That'd be fun.
VM:
I would not personally recommend that as a hobby. That would probably take many, many years.
SK:
Yeah. Yeah, because I guess you'd need a 3D printer plus a assembly robot together.
VM:
Exactly. Exactly. Exactly.
SK:
Yeah. You'd have ... It would be very slow, I'm sure. You'd have to speed up the video, but it'd be exponential, so as long as you have the input material. Yeah, anyways ...
VM:
But think of the internet points you could get.
SK:
So many.
VM:
Yeah.
SK:
See. This is how the robot apocalypse is going to happen. It's not going to be for greed of money. It's going to be for greed of internet fame.
VM:
Exactly. It's that all economics boils down to internet points.
SK:
Okay. Back to serious topics, I, myself, was ... I was sketching out a tool for direct manipulation of user interfaces, but my personal work is more about very nested interfaces, kind of like a TodoMVC, so it's all front-end logic, and it's very interactive. I was making a direct manipulation tool. I could make these sort of things, and the hard wall that I ran up against is that everywhere I put a slider for numbers or a color picker or anything like that, I also realized that I'd have to be able to put an expression, like an arbitrary expression or a value that my program computes elsewhere, and so ... Then, I was like, "Well, if I have to be able to put expressions everywhere, then basically, isn't it just a programming language?" Then, I can't have these nice widgets, like color picker things, so ...
SK:
But then I had this idea that ... Now, you're just giving me product feedback. Anyways. Then, I had this idea that we could have detachable widgets, where only the literals are widgets, but you could kind of like detach them and put it ... Anywhere in Webflow, anywhere on that panel where you could pick a color or a number, you could, instead, put an expression there, and then the expression could contain, itself, like, a color picker. I don't know. Those are some difficulties and a proposal. What are your thoughts on making a tool that's like Webflow and it's direct manipulationing this, but also more expressive and nestable, customizable.
VM:
Right. Right. That's a good question. We've deliberately chosen, chose not to kind of go down that level of complexity yet. Take something like CSS. It has a concept like calc. Right? To calc ... Instead of a direct value, "I want something to be 20 pixels," there's kind of an expression that you can say, "I want something to be 20 pixels plus 20 percent of the page width" or something like that. We haven't even gone to that complexity where we find ways to express that, because the majority of our product is so much more like direct manipulation-y, so it's hard for me to say how much value that actually provides, because even without those things, people have been able to create really, really powerful websites and experiences and animations, et cetera.
VM:
One part of my answer is that it feels like, in many cases, that sort of expressiveness might not even be necessary, especially in the web design use case, but once you start to go down that rabbit hole, when you want to have the same level of power that you might have in a TodoMVC app, then I don't actually know what the answer is to creating that level of expressivity. You maybe ... The fact that you have to write an expression becomes a necessity, but as long as you keep that to a minimum, almost like Excel does ... Excel, you have all this power with formulas and things like that, but it's easy to see when you messed up. Whenever you ... In a regular program, you get a semicolon wrong, the whole thing doesn't run, whereas in Excel, you get a formula wrong in a specific cell, you kind of see that the error is just there. It doesn't break the whole program. There's sort of like this iterative kind of solver model that the whole spreadsheet runs against.
VM:
As long as your visual way of expressing those really complicated front-end workflows keeps that type of principle. It's really, really hard to do the wrong thing, even when you have this ability to write out expressions. For example, you can compile expressions before you even let a user commit it and say, "The syntax is wrong here." You have a lot of flexibility to make it kind of like harder for the consumers of your software to do the wrong thing. I think that will ... The combination of those two things, the direct manipulation and the kind of, the ability to do these super custom things on the edges is probably the right approach in the long-term, but you just have to actually build them and see ... give people the task of, like, "Hey, building this interface or build this interaction" and see if it makes sense. It's very hard to abstractly try to determine whether that's the right approach or not.
SK:
I was wondering if you would have advice for other people looking to follow in your footsteps and following in Bret Victor's footsteps. For people looking to do Bret Victor-y things with their lives, what sort of ... Given that you've found a lot of success doing that, what would you recommend?
VM:
Hoo. That's a good question. For me, it was very ... I was lucky enough to be kind of exposed to certain things, like I described 3D animation and web design, where kind of seeing this concept of removing a modal or a mode-based type of workflow with one that has no modes or introduced direct manipulation, it was directly applicable. I've actually shared that video with a lot of people who aren't in programming or design, and some people actually just don't connect with it at all, so I think I was...
SK:
Yeah. I have to say that especially people not in programming, they don't get it at all. My girlfriend, she was so confused when I showed it to her, and she dismissed it so out of hand. It was tough for our relationship. It was so hard for me to hear. I'm like, "You don't understand. This video is the most important thing to me," and she's like, "But it's ... " She's like, "All the artistic tools I use, Photoshop, they all work like this already. I don't get what your problem is."
VM:
Yeah. Yeah, so it's very ... It's hard to say what I would advise, because it's such a personal thing. My wife had the same thing. We watched that video together, because I told her how impactful it was for me, and it was just like, "That's cool." Not quite the same ... Forget about reading Magic Ink. That's just way too ... Even for me, it was pretty dense to get through. I would say there's ... If the inspiration strikes around a specific concept ... Even in that video, Bret shared kind of like this new way of doing animation. Right? I don't think anybody has actually built that into a product yet, you know, when he was sort of manipulating it with his ... making the leaf animated. I don't think anybody has actually taken that to market, so I think if there are specific things where you can see that you can actually solve an existing ...
VM:
Here's how ... I actually heard this on another podcast. I think an investor was saying it. The way to identify business opportunities is to take something that people are already paying quite a bit of money for, and if you can actually make it way easier, that's almost a no-brainer, because there's a proven sort of use case for it, and you're making it easier. There's got to be a way to market that. I think there's quite a few ideas, maybe not with sort of the electrical diagramming that Bret Victor kind of did in that video, but maybe game development, maybe this video editing thing. It's hard to say, because I don't want to recommend, you know, start visual web design software, because we ...
VM:
It would be ... I honestly believe that it'll be very hard to kind of do all the work that we did in the last six years, so you have to ... Because when we started, it was sort of like a very, very niche thing. We were the only real player doing that, so we didn't really have competition, but I'm sure there are many other areas where we can apply this principle. Maybe it's very focused to just component design or animated SVG kind of output or, like I mentioned, video editing. I don't know. It's very hard to answer that. I think I ... I feel very lucky in that, for me, it clicked right away based on the experience I had with ... of how hard it was to build custom websites, and it just made sense. It was like, "Duh," but I don't know if ... that it'll apply to other types of products or industries.
SK:
One thing to note is that when I asked that question, I wasn't quite asking, "How would you come up with Bret Victor-y startup ideas?" But that is the question you answered, and that makes sense given the way I asked the question, because that's what you do. But clearly, you don't have to do a startup to do this kind of work.
VM:
Right.
SK:
Speaking of which, Bret isn't known for being an ardent fan of capitalism, so I'd be curious to get ... to hear if you've interacted with him recently and if he's seen what Webflow has become and what he thinks of it.
VM:
I did get a chance to meet him at Dynamicland, but unfortunately, we didn't get a chance to ... I didn't want to just start talking about my product or whatever, but based on his reaction to, let's say ... I know Khan Academy, John Resig, when he went to work there, and he sort of like took a lot of the principles behind Bret Victor's kind of direct manipulation and visual programming type of concepts and applied it to learning computer science. Bret had a lot of kind of criticism for that specific approach.
SK:
Yeah.
VM:
Yeah.
SK:
I'd say that's an understatement. It's one of my favorite stories of someone trying to pay homage to someone and getting, yeah, criticized in a big way.
VM:
Yeah, and I think, honestly ... What's the expression? Capitalism is the worst type of government except for all the other ones.
SK:
Yes.
VM:
For me, the fact that we have an economic incentive to create better products in the long-term actually impacts way more. It makes a much bigger dent in the universe, because it means that the thing that we're creating is actually long-term sustainable, whereas just creating something on the side to be completely perfect but doesn't solve some immediate business need may actually mean that you have a more perfect product, but you don't actually have long-term impact. It's sort of like there's a big trade-off. Right? I think there's ...
SK:
Well, I ... Yeah. I think, just to point out, there are a lot of, for example, the open web standards, W3 people, that side of business, and you have to have a big impact, so obviously, you can have a big impact both ways.
VM:
Yeah. Absolutely.
SK:
I just thought I'd point it out, because I ... Because when I initially, for myself, decided that I'd rather try and have a bigger impact without making money, I didn't think it was possible, because I came from the world of startups, and my dad is a finance person. Everyone was telling me that the only way to have a big impact is to start a company, and I believe them at first, so I feel like it's important to just say that.
VM:
Oh. Absolutely. I mean, look at Bret. Yeah. Look at Bret. He probably led to the creation of so many companies just by way of inspiration, and that's huge. I mean, if you create the sum total of that, none of that was him starting companies. Right?
SK:
Totally. Well, that's too bad that you don't have your own version of the Learnable Programming essay that criticized Khan Academy. You don't have your own beautiful essay that tells everybody how terrible your product is, but I guess ... Yeah.
VM:
Honestly, that's one of the reasons why I didn't want to write anything on Medium or some blog post saying, "This is inspired by Bret's stuff," because I didn't want the criticism, but, you know.
SK:
Yeah. Yeah.
VM:
To each their own.
SK:
Maybe one day, you'll be so lucky.
VM:
Yeah. Yeah.
SK:
Okay. In the last few minutes, I like to ask guests for their API, basically ways other people can interact with you or Webflow, if you're hiring, email, whatever it is that you want people who, listening to this to follow up with you.
VM:
Oh. Sure. I'm ... I think the only kind of social-y network that I use is Twitter, so I'm ... I have my DMs open on there. I love having conversations on there. I think most of the friends that I've met that are into visual programming have all been through Twitter, or primarily been through Twitter.
SK:
Yeah. I could say the same thing. I've made so many hundreds of friends through Twitter in the last year. It's amazing. I have been neglecting my real friends because my internet friends are more interesting.
VM:
Exactly. Yeah. That's the best way to get in touch with me. That's where I talk about programming and Webflow and all those things. I love kind of getting together with people, especially in San Francisco, because that's close to where I live, but I make it out to other places, too, just talking about this stuff over breakfast or lunch or whatever it is, but yeah. Twitter's the main channel.
SK:
Great. Is Webflow hiring? Is that something you're interested in or ...
VM:
Yes. Absolutely. We're hiring product designers, specifically those that have some bent towards programming. All of our product designers have some understanding of all the concepts behind front-end development, CSS, JavaScript, et cetera, and just people interested in creating tools that help other people create software. That is ... We're always hiring on that front, and then ... Right now, we're kind of ... We just hired a bunch of front-end developers, so that's not a big area of focus, but we are hiring product managers as well, people who can really understand this customer's problems and lead entire features or product efforts. The more technical you are, the better. I think everyone on the Webflow team tends to lean towards the very technical side, and that helps a lot with the way that we design products, the way that we think about how stuff is architected. Yeah. Definitely hiring on the product side.
SK:
Cool, and I was kind of curious. Is a big percentage of your team Bret Victor fans before they join the team, or you kind of inculcate them into it after they join, or you kind of leave it out of the workplace?
VM:
No. A bit percentage are ... started from conversations that were sparked by this talk, so they lead to closer conversations. Then, they lead to people joining the team. I would say roughly half of the team is huge, huge fans of Bret Victor. Oh. The other thing I wanted to mention around hiring, we're essentially worldwide. You don't have to move to San Francisco to work at Webflow. We're in, I think, 22 different states, 16 different countries, so it's ... There's a lot of flexibility there.
SK:
Yeah. That's wonderful. I'm definitely someone who prefers to work from home. Cool. Maybe we'll find someone who wants to work at Webflow.
VM:
Yeah. Hopefully.
SK:
I mean through some sort of ...
VM:
Right. Right.
SK:
Of course, you're going to find people that want to work at Webflow.
VM:
You'll collect your recruiter ... recruiting fee.
SK:
Oh. Yeah. I don't think I've yet connected someone for a job yet.
VM:
Hey.
SK:
I don't ... I'm not that good of a recruiter, but maybe one day.
VM:
This could be the first time. We'll see.
SK:
Could be. Well, anyways, thanks so much for taking the time to chat. This was a lot of fun.
VM:
Absolutely. Likewise. I loved this conversation.
SK:
All right. I'll catch you next time.
VM:
All right. Thanks, Steve. Bye.
SK:
Bye.