Davidhoang

David Hoang

Director of Design Webflow

David Hoang is a design leader, technologist, teacher, and startup advisor. He's currently the Director of Design at Webflow and User Experience Design Instructor at General Assembly.

Description

In this episode, we talk about using no-code tools to aid in your coding journey and your work, with David Hoang, director of design at Webflow. David talks about how he got into code through the fine arts, the utility of using no-code tools both for learning to code as well as in your career, and what some of his favorite no-code tools are.

Show Notes

Transcript

[00:00:05] SY: Welcome to the CodeNewbie Podcast where we talk to people on their coding journey in hopes of helping you on yours. I’m your host Saron, and today we’re talking about using no code tools to aid in your coding journey and your work with David Hoang, Director of Design at Webflow.

[00:00:22] DH: So with codeless innovation, the idea was, “How do you build products faster? How do you find ways to learn and understand before even writing a line of code?”

[00:00:33] SY: David talks about how he got into code, through the fine arts, the utility of using no code tools, both for learning to code as well as in your career, and what some of his favorite no code tools are after this.

[00:00:54] Heroku is a platform that enables developers to build, run, and operate applications entirely in the cloud. It streamlines development, allowing you to focus on your code, not your infrastructure. It also lets you use the most popular open source languages to build web apps. Also, you’re not locked in to the service. So why not start building your apps today with Heroku?

[00:01:17] TwilioQuest is a desktop roleplaying game for Mac, Windows, and Linux to teach you real world developer skills. The TwilioQuest Program was created in secret to train an elite group of leaders to combat a shadowy organization known only as the Legacy Systems. Take up the tools of software development, become an operator, save the cloud. Download and play TwilioQuest for free at twilio.com/quest.

[00:01:46] DigitalOcean offers the simplest, most developer friendly cloud platform. It’s optimized to make managing and scaling apps easy with an intuitive API, multiple storage options, integrated firewalls, load balancers, and more. Get started on DigitalOcean for free with the free $100 credit at DO.co/codenewbie. That’s DO.co/codenewbie.

[00:02:09] When you need to focus on building, do you want to get bogged down by your database? MongoDB is an intuitive, flexible document database that lets you get to building. MongoDB’s document model is a natural way to represent data so you can focus on what matters. MongoDB Atlas is the best way to use MongoDB. It’s a global cloud database service that gives you all of the developer productivity of MongoDB, plus the added simplicity of a fully managed database service. You can get started free with MongoDB Atlas at mongodb.com/atlas.

[00:02:47] SY: Thank you so much for being here.

[00:02:49] DH: Thanks so much for having me.

[00:02:50] SY: So how did you start your coding journey?

[00:02:53] DH: My coding journey started very visual. So I’ll start with, ever since I was a little kid, grew up very visually oriented, love to draw, and it was the way I really liked to learn. So the way I got into coding was using Macromedia Dreamweaver back in the day. Also other visual programming tools like HyperCard for the Mac, and that was the introduction for me into learning code because for me in particular, it was the sort of mental model that really resonated with me to being able to see how things work. So that’s how I began my journey in becoming code curious.

[00:03:32] SY: What got you code curious? Like what was the thing that made you go, “Oh, I want to look into this coding thing”?

[00:03:37] DH: I think for me, I’ve always had this curiosity in building things and code for me was that way to be able to create something in another layer of functionality. So that’s what drew me to it. I never had this ambition of being a programmer, per se. I didn’t even know what that was growing up, and I knew I liked making stuff and that’s kind of what brought me to coding.

[00:04:01] SY: What exposed you to coding? How did you even know it existed?

[00:04:04] DH: My parents. So I’m first-generation here. My mother and father came here, to the United States from Vietnam, and my father always knew that technology was going to be something important, maybe not in his life, but in the life of my brother and myself. So he was an early adopter in terms of the computers that we had. So I remember the Apple II and Commodore 64 were two machines that we had growing up as children, my brother and I, and though my dad didn’t have experience in that, he just knew it was something that was going to be important for us. So that’s what inspired us to even understand what programming is.

[00:04:46] SY: Go dad!

[00:04:47] DH: Yeah. Yeah. I had an uncle, right? I have an uncle rather who went to UC Berkeley and studied computer science, and he was the one that, if I had to point to the first type of program I wrote, you’re going to laugh, but it’s basically creating macros on Excel.

[00:05:05] SY: Yeah, that’s totally valid. Yeah.

[00:05:08] DH: Excel is a lot of people’s first programming languages, right? It’s like you’re programming and you didn’t even realize it. So my uncle introduced me to this world of functions and being able to create programs and macros and that kind of built this curiosity into other software.

[00:05:24] SY: So you got curious about coding. You dabbled a little bit. Did you end up studying it in college?

[00:05:30] DH: I did not. So there was a time where code wasn’t a part of my life and what I ended up doing in college was pursuing fine art. The thing that brought me back to programming and writing code is one of my sculpture projects was around interactive art installations, and that’s how I got back into HTML and CSS as a medium to be able to express. The installation I did, it’s interesting now looking back, but this was around 2006, 2005, around that time, and what I was looking to explore in my sculpture project was talking about how people present themselves and project themselves on the internet. I keep laughing thinking about it now, but a lot of it was building out custom Myspace pages, being able to edit and do that because I think, for me, growing up, I kind of grew up with the internet and the association I had with the internet was screen names. You weren’t really sharing identity the way that we do now, and especially during that time in college how you present yourself online was almost completely new. There were really no rules or best practices around that as we might now. So it was kind of this undefined space that I was looking to explore. And the project was really just exploring the perception of one’s identity online as it relates to true identity, like challenging authenticity and some of these other aspects. I often wonder if I express this again and explore it as an art project, how it might manifest itself today, but back then it was really focused on HTML and CSS. As I wanted to explore other ways to be able to push ideas, I found myself diving into other areas like JavaScript and started thinking about other things. So it became this curiosity that I accrued skills through being curious.

[00:07:37] SY: So when you got I guess kind of reintroduced to it, did you have goals of becoming a coder at that point?

[00:07:44] DH: I did not. What was important for me was the output of the creation, and it still is in a lot of ways because sometimes it’s hard for me to define like, “Am I a programmer? Am I a designer? Am I a product manager?” For me, the answer is yes, like I love all of this. And again, it’s kind of focused on creation and as a medium. So that was the concept that really resonated with me, especially going through art school, is that code is a medium no different than plaster for sculpture or photography. So it was another way to be able to create, and I’ve always seen it as such. It wasn’t until after college that I started seeing how code became a career path. And this was around 2006. My ambition still was to pursue visual arts as a practice. So I remember really prepping for applications to pursue my MFA. And one thing I learned is school’s very expensive and especially a master’s degree, so private schools, thinking about that, and I just realized, “Okay, I want to take a gap year. I want to take a year off and really explore.” It very well happened that that was the year when iPhone OS launched and it was the beginning of iOS and mobile platforms. And all of a sudden, we had this new form factor that a lot of people have never designed or created on where the barrier to entry felt pretty low because for me I’ve accrued all these skills from studying art, from exploring programming to take what I learned in school, Photoshop, some of these illustrators, some of these other visual design tools and graphic design tools, and now apply it to a new operating system that before then didn’t exist.

[00:09:42] SY: So when you were developing these skills and really digging into JavaScript, what were you using to learn these new skills?

[00:09:51] DH: At that time, I ended up moving to Seattle where I spent most of my adult life. And really for me, the way I like to learn is applied knowledge and really being around people who are really good at it. I would take people out to coffee and pick their brain and set up time to work together on projects and just essentially be an information sponge. And I think that’s why frontend programming was so relatable for me because I like that idea of being able to refresh the browser and see how I can improve it, what’s working, what’s not. I think when I started exploring compilers, it became so much more frustrating to be like, “What’s going on? I can’t see the output of this.” So I think that’s why JavaScript, HTML and CSS became something that was kind of my gateway language to use because I like to learn that way. So I think the really important thing for people who are learning to code and pursue that is find mentors, find people who will invest time in teaching you these things because I think what’s important for a mentor is like if you show those outcomes, they’re going to continue to invest. So I think early in my career, I built a lot of close relationships with people who took me under their wing to help guide me and really work in an applied way.

[00:11:15] SY: So I love that advice about getting mentors, but I think what people get stuck on is how do you get one. When you think about the role of a mentor, it can be very involved. It’s someone who’s giving up their time, who’s giving their advice and really kind of taking you under their wing. And it almost feels like a long-term relationship commitment, if that makes sense because it’s usually not like a one-off thing. So I’m wondering how do you suggest that we go about finding these mentors?

[00:11:43] DH: It’s the number one question I get right now, and it can be intimidating, and I think the number one advice I would give people is put yourself out there. I think the way I found my mentors throughout my career have been either cold emailing them, reaching out, or maybe it’s an idea that I shared that someone saw and was able to make a connection. So I think looking now as I’m mentoring people, the thing I look for is like, “Who’s got that drive? Who’s got that desire and curiosity?” And it’s a thing where I think most people I think will tell you that they’re looking to pay it forward somehow. So I think the number one thing is really putting yourself out there. You don’t know who might catch wind of it.

[00:12:29] SY: So things like tweeting, blogging, going to conferences, speaking at meetups, that sort of thing.

[00:12:35] DH: Yeah, absolutely.

[00:12:36] SY: Yeah. So when you find someone that you would like to mentor you, how do you start that conversation? I feel like it’s kind of awkward to go, “Hey. Do you want to be my mentor?” It’s kind of like that book like, “Hey, do you want to be my mom?”

[00:12:50] DH: Yeah. Exactly. Mentorship is any other type of relationship, right? I remember when friends would talk to me about romantic relationships. They’ll say, “You just know when it happens.” And I think that’s so true about mentorship too. It’s not necessarily like you’re cold emailing everyone, asking for a mentor. That’s a little bit extreme and it’s like how do you begin that dialogue? So I think the number one thing I just be clear about is what my intention is, like what I’m looking to learn. And I think for a lot of mentors, if they know they can deliver value or know someone who can, like they’re more than willing to donate their time knowing that there’s going to be a return on investment in a person.

[00:13:50] SY: TwilioQuest is a desktop roleplaying game for Mac, Windows, and Linux to teach you real world developer skills. Explore the Mysteries of the Pythonic Temple, the JavaScript Test Lab, and more all while learning the tools of software development with TwilioQuest. Become an operator, save the cloud. Download and play TwilioQuest for free at twilio.com/quest.

[00:14:14] No one wants to manage databases if they can avoid it. That’s why MongoDB made a MongoDB Atlas, a global cloud database service that runs on AWS, GCP, and Azure. You can deploy a fully managed MongoDB database in minutes with just a few clicks or API calls. MongoDB Atlas automates deployment, updates, scaling, and more so that you can focus on your application instead of taking care of your database. You can get started free at mongodb.com/atlas. If you’re already managing a MongoDB deployment, Atlas has a live migration service, so you can migrate it easily and with minimal downtime then get back to what matters. Stop managing your database and start using MongoDB Atlas.

[00:15:03] So I want to dig into a talk you gave at No Code Conf about Codeless Innovation. What are we talking about? What does that talk all about?

[00:15:14] DH: At that time, I was at One Medical, which is a health tech startup that’s kind of focused on primary care. So it’s the infusion of traditional healthcare delivery with technology because I think what One Medical did really well is to combine the two. We can’t expect to be too tech forward where operators and people in the field aren’t able to use such innovations and the other way around where we need to continue to push the needle. So we really believed in this co-design and co-development together on these initiatives. So with codeless innovation, the idea was, “How do you build products faster? How do you find ways to learn and understand before even writing a line of code?” Because ultimately for us, in the end, we had to build something, but what we were looking for is identifying ways we can innovate in cross functional groups with product, with people in the field, with operations, with business folks. We had design sessions that included finance people to get an understanding of what we’re looking to pursue. So the premise of that talk is how do you have tighter iteration cycles without using any code and really leveraging those tools to be able to advance your learning objective.

[00:16:39] SY: What are we iterating on?

[00:16:40] DH: It can be anything. It could vary from current process. So from a One Medical perspective, it could be how you go about the encounter, and the encounter being the doctor’s appointment. It could be innovating and learning more if there’s a new service you want to deliver as a company, being able to go end to end and identify what works, what doesn’t, and really help us learn like how do we get there faster.

[00:17:11] SY: So for those examples you gave, I guess I’m not really seeing the connection to coding. Why does that fall under codeless innovation? Like what does that have to do with technology?

[00:17:21] DH: I think the reason this is important, using no code tools in approaching codeless innovation, often for us, I speak as a designer, a lot of our objectives is to learn and de-risk and really identify like how do we approach building the right thing and we want to try and get as clear as possible with that. With a lot of organizations, I think sometimes there’s this tendency to jump into implementation so quick and start building…

[00:17:51] SY: Implementation, meaning coding?

[00:17:52] DH: Yes, implementation, writing the production code ultimately. However, there’s a lot of unintended consequences in that if you’re not learning early enough and you could ship the wrong thing, and I think the place where no code tools can really accelerate that learning cycle is you’re focused on the interaction, the feedback from end users and really focusing on that really identifying where you can de-risk and improve there before you even write a line of code.

[00:18:26] SY: So you mentioned no code tools a couple times. What are no code tools?

[00:18:31] DH: The simple way I would describe it are tools where you focus on developing visually first. So for example, I mentioned Dreamweaver as one of the tools I use back in the day. Like a lot of what made Dreamweaver really special is you are able to build layouts and different objects with a visual interface, but also have the power to be able to look at the code under the hood in that regard. So I think no code tools is essentially a visual interface that helps you develop without having to go through the process of writing every individual line of code.

[00:19:12] SY: So give me some modern examples of that. So it’s Dreamweaver, which I feel like people don’t use quite as much as they used to. I think it’s kind of fallen out of favor, I don’t want to say out of favor, but it’s just not as popular as it used to be. What are some no code tools that we should know about?

[00:19:26] DH: Yeah. I mean, it’s probably not a surprise that I’m going to mention Webflow first, which is where I’m at now. Along with Webflow, there’s some interesting tools out there. There’s one called Bubble that’s really focused on…

[00:19:37] SY: I’ve heard of Bubble.

[00:19:38] DH: Yeah, no code for building apps. Airtable is a no code tool.

[00:19:42] SY: That’s true.

[00:19:43] DH: Yeah.

[00:19:44] SY: You can get very far with Airtable blocks. Yeah.

[00:19:46] DH: Yeah. It’s interesting because I’ve built prototypes for this codeless innovation theme for clients or even personal explorations where I’m using Airtable as the database.

[00:20:00] SY: So are these no code tools for people who are not technical and don’t know how to code or is there a value in using them even if you are a developer?

[00:20:10] DH: Yeah. I firmly believe it’s for everybody. And for me, when I talk to engineers about no code tools like Webflow, it’s kind of this awkward moment because then they say, “Well, what do I do?” Right?

[00:20:26] SY: You’ve taken my job.

[00:20:27] DH: Yeah. Like I’ve learned to code and now you’re taking this job away from me. That’s not true. In fact, what we’re trying to do is expand the ability for people to create on the web and frankly, there’s not enough engineers out there either. So these are initiatives that build on top of each other. And I think one thing that’s really interesting is for engineers, like there’s so many big problems that we can really focus on. And I often use this example, like, “Aren’t engineers tired of having the center buttons or have to finagle a CSS?” Like, “Let’s use your ML degree on some of these big problems.” And that’s really the mission, right? Is that no code is a way for people to get there and they have the choice to go as deep as they’d like, right? So let’s not restrict it to people who maybe just want to spin up a business and want to run that and may never have a desire to be a programmer, while at the same time making sure that no code tools are sophisticated enough. That’s actually teaching people how to program. And I mentioned HyperCard. Quartz Composer is a big tool I use. And through using these tools, I understood what a database is, what logic is, conditions, and some of these elements. So it is a way for people to go as deep as they would like in terms of their programming journey.

[00:21:56] SY: So you recommend it as a way maybe to get started learning how to code.

[00:21:59] DH: Absolutely.

[00:22:01] SY: So I’m curious to hear how complicated of an app you can make with some of these tools because I’m thinking about Airtable. And to be fair, I’ve never actually used blocks on airtable, which I think is the way you really make apps. But when I think about Airtable, I’ve used the form function, you can make like a map on Airtable, you can make like a landing page, like this kind of simple web development type stuff that you can do. But I imagine it can get even more complex than that. Can you give me some examples of what are some of the more complex, deeper products you can build with some of these no code tools?

[00:22:36] DH: Yeah, and the one thing that’s amazing about being at Webflow is we have such a great community of Webflow users and no coders. I am always done at what people are able to build with the curation of these no code tools. I’ll give you an example. There’s a product called Makerpad. It’s a group of people that built this no code community and it’s a membership based community, and through the integrations of all these no code tools, they’ve been able to build a profitable business, kind of focused on training for no code tools, case studies, job boards, and they’ve done that without a line of code.

[00:23:23] SY: Coming up next, David talks about his response to developers who aren’t really into no code tools. He also shares how no code tools fit into a developer’s journey after this. Over nine million apps have been created and ran on Heroku’s cloud service. It scales and grows with you from free apps to enterprise apps, supporting things at enterprise scale. It also manages over two million data stores and makes over 175 add-on services available. Also, make sure to check out their podcast, Code[ish], which explores code, technology, tools, tips, and the life of the developer. Find it at heroku.com/podcast.

[00:24:18] With DigitalOcean’s cloud infrastructure, you’ll be able to build faster and scale easier from predicting pricing, to flexible configurations, to world-class customer support. You’ll get access to all the infrastructure services you need to grow. Plus, DigitalOcean’s community provides over 2,000 tutorials to help you stay up to date with the latest open source software, languages and frameworks. Get started on DigitalOcean for free with a free $100 credit at DO.co/codenewbie. That’s DO.co/codenewbie.

[00:24:56] SY: So you talked about the reaction of some developers to the idea of no code tools, which I think is perfectly valid. I can see someone going like, “Hey, I’m going to build an app to host a podcast.” And I’m like, “Wait a minute. That’s what I do.” So I totally appreciate that. But I’m also wondering, have you gotten any pushback of being like, “Well, no code isn’t legitimate”? You know what I mean? Like these things you’re building, they’re just toys. They’re not like real tools. And even kind of thinking about it as a way that maybe holds people back from learning how to code properly, have you gotten any pushback like that?

[00:25:30] DH: Oh yeah. I think no codes existed for a while ever since the mother of all demos and visual programming. So these have been dialogues that are not new and they’re still doubters in that regard. For me, I think the big aspect that’s trying to understand what the intention in no code tools are, what I would say to people who have those challenges is like, “How do we work together to be able to push this area of no code to be able to empower people to create the things, these ideas they have to make it tangible?” So for example, I imagine the InfoSec space, so people who focus on security and privacy have a lot of thoughts on no code tools, like, “How do we work together to figure out how to move that forward?” And I think it’s the two ideas of code and no code aren’t mutually exclusive. In fact, it’s not some zero-sum game in that regard, but I really see it as a compound effect that no code tools can help empower better programming tools as well and vice versa.

[00:26:40] SY: So I’m going to put you a little bit on the spot here, but if you were to design a curriculum for someone who is new to coding and looking to get their feet wet and looking to level up and eventually be a developer, what would that curriculum be and specifically where would no code tools sit in that roadmap?

[00:27:01] DH: In an area I would really double down on is focusing on the prototyping and proof of concept part of it, and I think what’s important is it’s not necessarily teaching people how to write syntax. It’s more teaching people how to understand how things function, how this medium works, and really spending that time to really get clear on someone who’s learning what their objectives are in that regard, and then equipping them with a deeper context of learning for them to learn how to code in that regard. I think that’s the biggest thing I see flawed in a lot of ways, how programming’s taught is that it’s focused on the what as opposed to the why. So I really encourage, I teach UX design part time and we’ve really kind of hone in on what is it you want to build, what does your business do, what does the product do, and really think end to end, like how do you get that out there. And no code is a great place to start because there’s a lot of people with ideas they want to get off the ground and it takes time to learn and it takes time to invest in programming and maybe no code tools are a way as that primer for them to get started with that and perhaps through that journey they’re able to get something off the ground or realize they want to go deeper in programming and it’s a great starting place for that.

[00:28:42] SY: Now at the end of every episode, we ask our guests to fill in the blanks of some very important questions. David, are you ready to fill in the blanks?

[00:28:49] DH: All right, let’s do it.

[00:28:50] SY: Number one, worst advice I’ve ever received is?

[00:28:54] DH: Do just your job.

[00:28:56] SY: Tell me about that.

[00:28:57] DH: It’s important to identify the edges, and what I mean by that is edges and constraints of what you can push. And if you only do just your job, you never discover it. Now I’m not advocating for people to do multiple jobs and not be rewarded for that either. So what I am saying is have that growth mindset, and as you are doing your job, whatever it may be, see how you can push that and really have this growth mindset. So do just your job is the worst advice I’ve ever received.

[00:29:30] SY: Number two, best advice I’ve ever received is?

[00:29:34] DH: Best advice I’ve ever received is to show ideas early and I would encourage this for anyone who’s starting in programming, design, building, and feedback is so important. And the more you can get ideas out there quick, it unlocks such a world of connections and opportunities in that regard. I know as a designer a lot of us are perfectionists and we want everything to be pixel perfect. And I think the thing that’s really helped me in my career is to be fearless in having first drafts, getting that out there, sharing those ideas because you don’t know where it might take you.

[00:30:17] SY: So when you show those first drafts, are you actually fearless? Meaning you don’t feel fear or do you feel it and just do it anyway?

[00:30:27] DH: I would say I don’t feel fear. I know that’s kind of a bold statement.

[00:30:28] SY: Wow! That’s great.

[00:30:30] DH: Yeah. I was not always like this.

[00:30:32] SY: How did you get to that point? I don’t think we’ve been fearless. Tell me.

[00:30:36] DH: Because I think ultimately when you think about sharing ideas and getting feedback, there’s very little you actually have to lose. There’s a lot of fears and I totally understand that. Like if you share an idea, what if someone steals your idea and starts building the thing you have? What I’ve learned is you put yourself out there, you make yourself vulnerable, you may find a partner, you may find someone who’s going to help you bring that idea come to life. You may find an investor or someone who is willing to mentor you. So to really get those ideas out, I think that’s where you really make progress on things. And I would say it’s taken me almost 16 years of doing this to really feel fearless and bold in first drafts.

[00:31:22] SY: Number three, my first coding project was about?

[00:31:26] DH: Yeah, I remember this vividly. So the first thing I actually deployed, so shipping it into production, it was a Ruby on Rails App, and I think it was Rails 1.0. So it was way back in the day. And it was an app that would randomly generate inspirational quotes that you could post to Twitter. And it was called “Twote.it”. And that was the first project I did working with a friend end to end, building the views out, building the database. I think we deployed it on Heroku.

[00:32:04] SY: Very cool. Number four, one thing I wish I knew when I first started to code is?

[00:32:10] DH: Everyone’s learning and it doesn’t matter experience or level. Don’t be intimidated by it. I remember as a designer, as I was exploring iOS early on, I would have these fears, this is when I had fears. I had these fears around not knowing something and being afraid to ask people, only to find out that I’m working with iOS engineers who have tons of experience and have written books where they have to Google something or they have to go on Stack Overflow and look something up too. And the one thing I wish I knew is that everyone has that sense of not knowing or having to look something up and it’s okay to not know the answer.

[00:32:59] SY: Well, thank you so much for joining us, David.

[00:33:01] DH: Thanks for having me.

[00:33:10] SY: This show is produced and mixed by Levi Sharpe. You can reach out to us on Twitter at CodeNewbies or send me an email, hello@codenewbie.org. Join us for our weekly Twitter chats. We’ve got our Wednesday chats at 9 P.M. Eastern Time and our weekly coding check-in every Sunday at 2 P.M. Eastern Time. For more info on the podcast, check out www.codenewbie.org/podcast. Thanks for listening. See you next week.

Thank you to these sponsors for supporting the show!

Thank you to these sponsors for supporting the show!