408: Frontend Masterery With Marc Grabanski
Marc Grabanski is the CEO and UI Developer at Frontend Masters. He talks with us about what Frontend Masters is, who it's for, how they decide what to teach, what's coming up, and the question everyone asks: what do I learn next?
Guests
Time Jump Links
Transcript
[Banjo music]
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another self-isolated episode of the ShopTalk Show. I'm Dave--got kids in the next room and you might be able to hear them--Rupert and with me is Chris--
Chris Coyier: Yeah!
Dave: --sitting comfy in the booth--Coyier. How are you, Chris?
Chris: Fantastic. There's an exponential scale of children in this Zoom right now. I have one, Dave has two, and Marc Grabanski--
Marc Grabanski: I have four!
Chris: Four!
Marc: Yeah.
Chris: Our next guest is going to have eight children. It's mandatory.
Dave: It's like the Fibonacci of -- [Laughter] Oh, this is great.
Chris: So, this is Marc Grabanski.
Dave: Hi, Marc.
Chris: Hey, Marc. Thanks for coming on the show.
Marc: Hello.
Chris: How you holding up over there?
Marc: Thanks for having me. Doing well. Doing well. Adjusting to the working from home, like you said, with the kids and remote schooling and all that stuff.
Chris: Yeah. Marc, you're in--
Marc: Minnesota.
Chris: Minneapolis.
Marc: Yep.
Chris: Hey, yeah.
Marc: Yep, a suburb.
Chris: I spent most of my life in Wisconsin, so that's always just near and dear to me, Midwesterners getting it done.
Marc: Absolutely. Building a real business. No VC. [Laughter]
Chris: Yeah!
Dave: No VC in the Midwest? Come on.
Chris: Is that right, ever?
[Laughter]
Chris: Marc, you're the CEO. Do you still use that title? I'm sure you do.
Marc: Yeah. Yeah.
Chris: Owner/operator, CEO of Frontend Masters.
Marc: Yes.
Chris: I'm sure pretty much everybody listening to this show has at least heard of Frontend Masters. The URL is frontendmasters.com. You sponsored in the past, so thanks for your support in that way. Just a journalistic shoutout there but, of course, we just have Marc on because he's an interesting guy running an interesting company that's at the heart of teaching today's front-end developers what the heck they're doing.
Marc: Absolutely.
Chris: [Laughter]
Marc: Yeah. No, I really like to sponsor things that I actually listen to or watch or read. That's definitely the strategy there, so excited to support your work.
Chris: Yeah, I like it, so maybe other people like me will like it. Yeah, appreciate that. So, I mean, I guess, just what is it? Let's do the two-minute life story here.
Dave: Elevator pitch.
Chris: Yeah.
Marc: Yeah, Frontend Masters. Yeah, I mean the cliff note version is, I spoke at a lot of different conferences and some of which you and I spoke at. That's how I met you, I think.
Through the time, I really figured out that education is what I really, really care about. I created a bunch of open-source stuff like the jQuery plugins and stuff like that and, through that, got to find out that what I really love is education and empowering others to build things.
Yeah, speaking at conferences, then eventually creating conferences, and then trying the whole screencast thing and those kinds of things. I really felt like I was missing that in-person kind of direct feedback when I was teaching.
From there, it kicked off workshops, teaching workshops, and found out that all these people, these lovely people that I've met through conferences could teach specific topics better than I could. It was years of just trying to figure out how to take that kind of in-person workshop teaching people, getting that live feedback and bringing that to video.
Yeah, that was a multiyear process and now it's a video subscription site and that kind of unique way that we record, I guess, kind of makes the format quite a bit different. It's scoped to one day, so you get through a broad understanding and still are able to go very deep in a particular topic.
Dave: Not to be an advertisement, but I think you're right. The workshopiness of it, because it was an IRL workshop, it is something you can get through in a day as opposed to some courses I buy, sign up, or take. It's kind of like this, "Oh, 72 hours of video. Okay. Good. Let's just block off a month to get through it." This is more like, hey, here's….
Marc: Yeah, or it's way too short where it's not enough context and not enough telling of the whole story of what you're learning. Yeah, I like our format that you're able to cover a lot of ground but it doesn't go forever and ever and ever.
Dave: I did Sarah Drasner's Vue course. You walk away and you're like, "I know Vue," kind of like I know kung fu. [Laughter]
Marc: Yeah. Sarah is awesome.
Chris: I want to have that moment. I was just writing some Vue this morning. CodePen is supporting Vue single file components now. I don't know if you knew that, Dave. It's pretty cool though.
Dave: Oh. Oh!
Chris: It's just like a special editor because it requires.
Dave: Okay.
Chris: Single file components require a little extra Webpack panache. You can't use single-file components directly in the browser, which as we know from this show and talking to Evan You that that's a first-class citizen of Vue is that you can use it just as a script tag in the client just like jQuery or whatever.
Dave: Like vue.component. But now you're saying I can mishmash all my HTML, CSS, and JavaScript into one.
Chris: Yeah, a lot of people like that. Just bundle it anyway because then you get that really nice file format. I think he said on the show that half the people use it in that way.
Dave: Yeah. Yeah.
Marc: Yeah, I think Svelte is also kind of going in that direction as well.
Dave: Oh, man.
Chris: But Svelte has -- doesn't it--?
Dave: Well, it has its own specific compiler.
Chris: You have to compile it. You have to.
Dave: You have to use its -- yeah.
Marc: Yeah, I guess I was just talking about having everything in one place.
Chris: Yeah, the single file component deal. Yeah, and I think React is salivating towards it a little bit. We saw that. Was it Timber or there's some logging framework. We're going to have Tom on the show to talk about it.
Dave: Redwood.
Chris: Redwood, they're kind of moving towards an SFC kind of world, too, it sounds like.
Marc: Yeah, I mean the fact that Vue, you can load all of that without a compile stage, that's what you're talking about?
Chris: Yeah, that that's kind of cool, you know, but of course the thing that does require a compile stage, we're offering that on CodePen. Anyway, that's why I was writing Vue. Now I can't remember why we were talking about Vue at all.
Oh, Dave took Sarah's Frontend Masters course on it. It's just funny how different it is. You really do need a little training sometimes to kick you off in these new things because the syntax is just weird enough between frameworks that you're like, "Man, I wish somebody would just tell me."
[Laughter]
Dave: For me, it's the economics. It's like, okay, I can go source 12 blog posts and try to make it into one story or I could pay some money and just have Sarah tell me all in one go and I'm good. That's where I'm a big fan of these online courses. I've bought quite a few.
It's sometimes embarrassing. It's like, "Oh, Dave Rupert is taking Beginner JavaScript?" But it's purely like, did I miss something? I've learned a lot of JavaScript. Did I miss something like some array function that would change my whole life, or something like that? I just want to know that. That's why I sign up for these education sources even though I like to think of myself as pretty smart, okay at the Web development, but there's something to be said. It's like you can listen to 40 hours of podcasts or you could read a book. [Laughter]
Marc: Yeah. Sure. That was definitely a big deal. Like I said, these people can teach, better than I can, a specific topic. I've been in the industry for over 20 years. I've built large, large applications in a number of different ways. Yeah, having that one person that's going deep in one particular area and they can tell you the areas to avoid, the things that you should focus on, really the 80/20 of that kind of ecosystem, I think that is really, really powerful, for sure.
Chris: Isn't Frontend Masters kind of for Dave? Not for Dave Rupert but for people like Dave because it doesn't seem like the marketing of it is particularly like, "Is this your first day? Are you trying to change your life from being a ladder climber to a front-end developer? Try Frontend Masters." It seems to me--I mean just straight up correct me if I'm wrong--that it's more for people learning a framework, their second framework or something, than it is to level up somebody from absolute nothing.
Marc: Yeah. we do have a free boot camp that we launched. You can go to frontendmasters.com/bootcamp if you want that kind of early-stage, building a couple of projects, and figuring out if code is right for you or not. Certainly, that core paid service, we assume one or two years of professional experience. We're trying to get you to that level of senior engineer, that level of architecting large applications, thinking about what technology you're going to be able to choose for your organization and that kind of thing.
The goal is really to kind of upgrade you from junior or midlevel to senior. That's kind of the sweet spot.
Chris: That's unique, isn't it? How often do you think about it? It just seems really unique to me that there are so many of whatever you'd consider to be competitors that are not focused on the next level. They prefer to stay in that.
Marc: Well, you know the largest audience, the largest paying audience is that really early, early beginner because there are just so many people wanting to learn how to code. Yeah, if you're looking for VC money to target the intermediate to advanced audience, it's not going to happen. The fact that we're bootstrapped, the fact that I want to do things that are interesting to me, like I want to learn from these people, I want to see these deep dives, it's like watch Sean Larkin do a bunch of stuff with Webpack and then, immediately after, ship a brand new Webpack build for one of the sites that we were working on.
Chris: On your own site?
Marc: Yeah.
Chris: Nice.
Marc: Yeah, all the performance stuff. We apply the things that people are teaching about.
Chris: [Laughter] I do that sometimes, too, where I publish some interesting post on CSS-Tricks and then I feel guilty that we're not doing it or we're not taking advantage of it in the way that the post lays out right there. I'm like, "Oh, damn it. Now I literally have to spend the afternoon doing whatever this post says because it's a good idea."
Dave: You have no inline CSS policy at CSS-Tricks. [Laughter]
Chris: Uh…
Dave: Just kidding. No.
Chris: I was working on an admin page on CodePen the other day and I just went all in. I just styled the entire page with inline CSS. [Laughter] It felt so weird but, for some reason, I just felt like not monkeying around with a Rails asset pipeline and crap. It was just like, "You know what? It's not that many styles." You can get really far these days with how much control you have with grid on the parent element. Anyway, there's neither here nor there.
Marc: It feels like that's your style, though, too, Chris. You just kind of like to bare metal build stuff.
Chris: Sometimes. Hell, yeah. Yeah.
Marc: I don't know.
Dave: Not afraid of the publish….
Marc: I really liked your recent screencast that you've been doing.
Chris: Ah, thanks. I just did one this morning. I don't have a day-long version of it. Otherwise, I'd sell it to you.
[Laughter]
Marc: Yeah, I mean we've been trying to get you to do a workshop for a while.
Chris: I know. it's going to happen.
Marc: Someday.
Chris: I've got to do it, especially now that -- someday. Well, I just think it'll work well. Marc has generously not only sponsored this show in the past, but he's sponsoring CSS-Tricks right now, too, which is awesome because I don't have that. I mean I do screencasts, as Marc knows and just graciously complimented me on, but I don't really have anything on CSS-Tricks that's like, do you want to learn X from scratch? I've dabbled in that before but haven't done that great of a job, so I don't really have anywhere to send anybody to if they're just like, "Listen. Aren't you the guy that teaches people front-end stuff?" I'm like, "Eh, tangentially, like if you Google something you might learn the answer to your question on my site, but I don't really have training," which actually has turned out to be fortuitous for me because it means I can partner with people like Marc and be like, "Go over there and learn." Then when you Google stuff, you might end up back on my site.
Marc: Yeah. No, that partnership has been awesome. It's just like people land on a specific article about React and then they want to go learn React front to back. We have a whole learning path that they can go learn all the various aspects.
Chris: Right. React has got to be huge for you, yeah?
Marc: Yeah, well, actually, the JavaScript fundamentals is kind of our biggest strength because we have everything from just the basics of the language all the way up through asynchronous programming, functional programming, and now we just dropped hardcore functional programming where you're doing monad transformers and all sorts of crazy stuff. That kind of path of just like really to the metal building and understanding of the language itself. Then you can apply that to other frameworks.
Obviously, we have a bunch of React stuff because that's super, super hot. Me, my focus is always on the fundamentals, but deep fundamentals of the Web stack, how it fits together.
Chris: It's nice that you let those principles guide you, in a way, because if all you cared about is what's the hottest thing right now, I want to get courses out on that--
Marc: Yeah.
Chris: --because that's all that matters and you didn't have a principle guiding you, that might get you in trouble.
Marc: Yeah, exactly. I mean we have missed a few things, right? When I saw Redux, I just hated it so bad. [Laughter] I just thought it was just such a bad pattern. It was really popular and it kind of missed it, right?
We eventually got some good Redux stuff in there but then the industry came back around. Now it's like, oh, do as much as you can with these context APIs that we give you, which I thought is a better approach. I was like, "Hey," so they kind of came around, but everybody was like, "Redux! Redux! Redux!" I was like, "No, this is so bad." [Laughter]
I guess principles can be a failure as well in that scenario. But, in general, I would say that the internal compass of just focusing on deep fundamentals and building out that understanding from first principles has paid off in spades because, for every one that we missed, we'll drop a course like JavaScript the hard parts … sentences, really kind of building our entire understanding of the compilation phase and JavaScript under the hood and Clojure and all these kinds of things in a visual way. That's going to be valuable for years and years. People kind of come back to refresh their understanding of those kind of deeper concepts of JavaScript.
Yeah, focusing on that kind of first principles approach has always been my -- you know, it took me forever to allow anybody on my team to put React in any scenario in our website, in our stack.
Chris: Whoa! Really?
Marc: Yeah.
Chris: Oh, that's great.
Marc: Because frontendmasters.com, it's--
Chris: You just weren't sure?
Marc: No, I mean frontendmasters.com is vanilla JavaScript. It's super-fast. If you go to it, the performance is off the charts. It's not loading a lot. It goes, right? It's built from that first-principles approach. But when you look at an admin dashboard with tons and tons of functionality and you need to build it out quickly, we're using semantic UI and React, and it allows us to move really fast in that area. Yeah, I just don't like putting a lot of abstraction layers between you and the code. I just like it to load fast and work fast and not have dependencies.
Chris: That's the most practical thing I've ever heard.
Marc: Yeah.
Chris: You know? Yeah, the frontend of our site that doesn't have that much super detailed interactivity, it's a little blog-like. You click on the titles of things and dig deeper into the site. Maybe React is not particularly useful there. Then the dashboard.
Marc: Well, I just feel like--
Chris: All dashboards are React.
Marc: I just feel like once you start to go down that path, you start to include everything. You're just like, "Oh, instead of building this, I'm going to NPM install this. I'm going to NPM install that. Eventually, you just get this massive pile of code. It's just like if you would have done first principles thinking towards the thing that you're building, even our courses player, it's so, so small amount of code because it's just built from that first principles thinking and having an architecture that fits our use case and everything is pluggable.
We can use it everywhere. We can use it for promo videos. We can use it for the big courses player. We can use it on the backend for Q&A, editing, and all this kind of stuff. It's just like this tiny little bit of code that just powers so much. That's what you get to when you have that first principles mindset and you really understand the languages and the browser and what it's doing. You're not having so many layers of abstraction where you're just installing everything on a whim.
Chris: Right. The balance, though, right? The second you need a little more abstraction; you can't be afraid of it either.
Marc: Yeah.
Chris: You can dig yourself in a hole. Anyway, what were you going to say, Dave?
Dave: That's actually been my experience this week. I'm working but then trying to do a little side project stuff. Then it's like, okay, I want to use Netlify's identity system, which is pretty easy to get up and going.
Chris: Right.
Dave: But you read a tutorial like NPM install React Netlify identity blah-blah-blah. You're like, "Well, okay. I'm not using React, so what do I need to do?" I feel like jumping in the deep end can work.
Marc: But then this tool doesn't work exactly right with this tool, so you've got to put this glue code in the middle and blah-blah-blah.
Dave: Yeah, so then you just send up glue and crud together and you're like, I'm not a React developer but I guess I've got to be because I want to do a Netlify login or whatever." If you strip it down, then this is what I had to do is just be like, "Okay, what's the basic Netlify login?" They have a script you do. Even that's maybe too fancy. Now I've done the script and it's like, okay, now I'm maybe going to try to role my own login and see what that's like. Then once I do that then maybe I can see what Next Vue Netlify login blah-blah-blah. Then I'll use the plugin system. I don't want to jump into the plugin system first. That's just me, though.
Chris: Wow. That's your life story. [Laughter]
Dave: My life story. No shortcuts. Do it the hard mode always. [Laughter]
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Netlify. Maybe you already know Netlify because it kicks butt. That might be a reason you know why. You know one of the -- I don't know. I guess the default way I think of Netlify is, like, I have a site, whatever, some kind of website, a simple site that maybe I use a static site generator on. Maybe I don't. Maybe it's just flat files. Maybe I'm building it with a headless CMS or I'm building it in some kind of JAMstack style or some kind of front-end JavaScript-focused style. There are lots of different sites you can build.
I have a repo for it on GitHub or GitLab or any other Git repo place. I need it to be deployed. I need to send it up to the Internet, a production worthy site, a super-fast CDN-backed, beautiful deployment system, that's what I need and I don't want to write my own deployment and I don't want to use third-party tools for deployment. I want my host and my deployment to be together. Maybe you don't even think in that way because you didn't even know it possible. That's Netlify.
I've got this repo. I want to deploy it. You know how I deploy it? I push to master. That's all I need to do and your site is up.
It's great. I use it for everything possible because I just love Netlify. It's also so affordable, which is great. A lot of times you're just below the free tier and you can just use Netlify for free. There are just a few things they charge for.
Here's a brand new thing on Netlify that they just announced at JAMstack London is Netlify Analytics. That's one of the things that costs a few bucks. You want to turn on Analytics for your site, it's $9 a month, which is trivial for the good information that you get for it.
It's amazing because, first of all, if you didn't have any analytics on your site before, you turn on analytics and you'll have your historical analytics too because it's based on server logs. They have the server logs anyway and they can kind of parse them and get the data together for your Netlify site. It's incredible. The day that you turn it on, you have tons of data about the usage of your site.
Server logs is the best possible way to do analytics. You don't even have to care how it works. The point is, it's not slowing down your site for any reason because there is no client-side JavaScript at all that's tracking anything. It's all handled after the fact and analyzed after the fact.
Nothing can block it, which is kind of nice. I bet--I don't know--maybe every single person listening to this runs an ad blocker of some kind and a lot of them have flipped on blocking Google stuff like Google Analytics, like just don't let it run at all. Google Analytics is the big player on the player on the block and now that data is totally missing from that analytics. That's a big deal. People that just turn JavaScript off for any reason aren't tracked in that way. This data will be way more accurate. This is the most accurate analytics you can possibly have for a site because of how they've done it.
Anyway, it's great. It just feels really Netlify-y. You get good data from it for any reason you'd want to use analytics. I don't know. Just check it out, Netlify Analytics. Good job, team. Love it.
[Banjo music ends]
Chris: I got another one. Just yesterday, we were working redesigning and rebuilding the asset hosting feature of CodePen, which is kind of bad right now. It's functional and you can upload files and use them, which is the crux of it, but there's just so much. The world has just moved on as far as how good you can make that experience. It can be a lot better, so we're doing it.
There is a fork in the road, two different forks in the road where we took different forks. For one, we ended up picking this software called--sorry, Marc. I'm just taking us down a weird road here--called File Stack. Have you ever seen File Stack? It's like a fricken' super nice uploading experience.
It's drag and drop. They have a React component but it's just vanilla, too. If you want to upload a file, you could build out your whole UI or you could just load this thing. This thing is so wicked fully-featured uploader machine.
There are other competitors. There's freeware and stuff, but they do such a good job that sometimes it just makes sense to use the thing that just kicks ass at this one job. Fine, there's that fork in the road where, instead of rolling our own, we remove thousands of lines of code to use some other thing. That's the, like, "Eh, I did the opposite of what Dave would normally do, I guess."
But then we were like, you know we really need good search for assets too because, theoretically, people have tens, hundreds. Some of our users have thousands of assets. They need to search through and find them. Search can be easy or hard.
Like Marc was telling us, "I don't know. NPM install search thing. I don't know. There's probably something that does a good job with this."
Our assumption while building it was, we're going to use this thing called Fuse.js. It kind of looks awesome. It's like a really well-done, kind of like just NPM install it or even just use it in a browser search library. Some of its core functionality is it can do stuff that would be hard to write from scratch like fuzzy search, like when you spell something wrong; it still finds the thing that you spelled incorrectly.
We were like, we don't have a lot of evidence that anybody needs that. Plus, it's meant to deep search within JSON records where we're largely just searching the name of a file. There's nothing deeper to search than that with an asset for us. Writing a couple lines of code in raw JavaScript, it's just like--I don't know--just match. Lower case the string and filter on that.
It turned from what could have been tens of kilobytes of JavaScript to power a search is now a couple of lines. That's the other fork in the road. Don't NPM install something. It depends on which fork you take.
Marc: Well, and then when you install that big monolithic thing, it's like, yeah, it does that thing well and now you're operating with the confines of what configuration they have and then you're building your stuff on top of their APIs. Then when you come back it two years later or three years later, what if that company is defunct or you do NPM install and now all the APIs are different?
Chris: Right.
Marc: The thing that you were doing in the past doesn't work today, and so I don't know. I've been bitten so many times over the years over that kind of stuff. I think Frontend Masters, as a company, we're very much, yeah, build it. If we have to use one little library, fine. That's fine.
Chris: Right.
Marc: Build it. Then when you come back to it a year later, some part of the code that you haven't touched in a while, it's like there's no NPM install. It just works. Everything works.
Chris: Yeah.
Dave: Yeah.
Marc: You can just open the file, write your code, and you're done.
Chris: So cool.
Marc: It's like I built this dashboard system in a couple of days because I just imported the JavaScript that I needed and then just dropped in, it was like, 50 or 100 lines of code. I basically pulled in all of the functionality from the site into one user dashboard. It was scary fast because it's all just little JavaScript modules. You include what you need and then you're good. It just works. [Laughter]
Chris: Yep. Part of that probably comes from the age of your company or knowing the experience that you have and the length and the fact that you want to be around ten years from now and stuff.
Marc: Right. We're not built to sell or something like that.
Chris: Yeah. We picked this file stack thing because it just seems industry best of kind of uploading experience and you have a lot of control over it. You can just throw that script on the page and it'll upload a file and it will put it on its CDN for you. You're like, how cool is that? I literally spent five minutes and now I have an uploader thing. It uploads to them but then as--
Dave: Not your S3 bucket. It's….
Chris: Well, of course, it has all that capability, though, you know. But it's probably--I don't know--10x more complicated. Not more complicated but it just takes you longer and it's more fiddly and stuff to get it uploading to an S3 bucket. But we have to do that. We can't. I can't choose … and then be like, "Ah, just use their CDN. Whatever," for our user-hosted assets. That's not an acceptable thing.
Marc: Right.
Chris: Because it's like, who knows what happens to that company?
Marc: Right.
Chris: It looks good now but who knows.
Marc: Yeah. Even the tools that we use to teach, right? We used a thing called Plunker and it was down for a long time. Then who knows if it still exists or whatever.
Chris: Right.
Marc: We use CodePen a lot for a lot of our stuff because we know it's going to be around for a while. Right? Right, Chris? Right?
[Laughter]
Chris: You're goddang right it is!
Marc: All right.
Dave: Even longer after it sells to Microsoft.
Chris: I wouldn't blame you, at the same time, if you looked into something. I'm not telling you to switch. I'm going to keep this damn thing alive for the rest of my life, if I can do it. But having that kind of mental process of being like, "What can we trust and what can't we?" is a big deal.
We're uploading to an S3 bucket. There's still an assumption there. The assumption is that S3 buckets stick around forever too. Now, that seems like a safer assumption—
Marc: Yeah.
Chris: --because Amazon is just so giant and yadda-yadda. At some point, you've got to just place your bets.
Marc: Right. Right. Yeah.
Chris: Place your bets in the places that feel instinctually good to you and that there's some proof that are good.
Marc: Right.
Chris: I hope to prove that every day at CodePen. I'm proving it by doing it.
Marc: Mm-hmm.
Chris: Anyway.
Marc: Yeah, I mean we use AWS as well, but even our infrastructure code or our back-end code, our APIs, it's all Go and it's again very minimal libraries. Yeah, it's just incredibly scalable and we keep building all of this really complex stuff on the back-end on, again, first principles, really simple, to the metal code. That kind of mindset is on the back-end as well as the front-end, and so we're able to build incredible stuff like QA tools, custom processes for production and, like I said, our course's play area is custom. Now we're building a whole custom codec pipeline, which is going to reduce our videos by like 90% and up the quality.
Chris: No kidding?
Marc: Yeah.
Dave: Wow.
Marc: I don't know. I just really, really like that first principles thinking, thinking long-term, building modules that are with minimal dependencies. Yeah, I don't know.
Chris: It's interesting that you're in Go. My co-founder Alex is all writing a bunch of our crap in Go and he just can't shut up about it. Just fricken' loves it. It's so fast.
Marc: Yeah. Yeah, that's our CTO. He's kind of like my exact counterpart in the backend. Everything that I care about on the front-end, he doesn't care about. Everything he cares about on the back-end, I don't care about.
Chris: [Laughter]
Marc: We've worked together for, man, it's like 15 years now we've worked together. He hired me originally on some consulting projects and then I hired him. Then eventually, build Frontend Masters and he's our CTO, but he really has that exact same approach on the back-end whereas other engineers, "Why don't we bring in this other thing?" He's like, "It doesn't fit our use case. Just build the thing. Just do it and now it works. It will work forever and we can build on top of it. By the way, it's X amount of times faster." He's the exact kind of mindset of the back-end as I am on the front-end, and so it's really fun.
Dave: I have a friend who does a bunch of back-end stuff. He was sort of saying his last five years of his career has been dependency hell, just managing dependencies, like, "Oh, god. That one broke. Ah!! Now that's a fire." He's kind of been stripping this down to, like, "We don't do mega dependency trees." You know? His kind of architecture census has been built off of like, "Oh, I've seen that go really bad," so you scale it down. You build your own thing. No secret black boxes, all that.
Marc: Absolutely. Yeah.
Dave: That said, this file stack looks good, Chris.
Chris: Oh, god.
[Laughter]
Chris: I just tried it. It's amazing. I mean just for the people out there, too. It's not only like you get this uploader that then just has really good drag and drop support. Just that alone. Try to hand-code a file drag and drop. You can do it. We have it live in production on CodePen right now, but it's a little buggy. It's a little pain in the ass. To get it really right is hard. I'm all about abstracting that problem to somebody else.
It's not just that. Then you upload an image and you say, oh, how about you just open the cropping tool and you crop it right while you're in there? Why don't you optimize it while you're in there and make sure it's being served in the right format? How about you upload it from Dropbox? Here's a Dropbox file picker right inside of it. You just get all that for free. Come on. That's like a tenth of it.
Dave: Mm-hmm.
Chris: Then you send it through a workflow on its way out and the workflow is like, "Okay, well, it needs to be 600 pixels when it's put where it is because it's being used in this email or whatever. Apply a monochrome filter to it and then put it in this S3 bucket but run it through this other service first." It's fancy crap like that, so it's so cool.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by AWS Amplify. You know AWS, right? Amazon Web Services powers most of the Internet, it feels like. There are a ton of things that go in the AWS bucket like EC2. It allows you to spin up servers of your choice and has all kinds of configuration, S3 is for file storage, Lambdas is for running cloud functions, all kinds of stuff that, individually, you can set up, use, and are great, but there's so much more than that. There are a ton of different things AWS does.
AWS Amplify is kind of a package of tools to help you build full-stack apps for the Web. it's like, just give me the stuff that I need that usually you need to build an app. Amplify is hosting. You need Web hosting; it's got that. It's got authentication for logins for your users.
It's got GraphQL as a first-class citizen of it. It's got serverless functions like I need the Lambda thing. I want to run some code in the cloud to hit APIs and do whatever else I need to. And it's got file storage if you need it. It's got some machine learning stuff in there if you need it.
Amplify is this easy to use, full-stack framework for getting started quick with building Web apps. It's really cool. The auth stuff alone is cool. It's just a few lines of code in there.
GraphQL has taken over the world of how to get things from a database, put things back in a database, really front-end development-friendly way to do database stuff. Love GraphQL. It's just built-in as a first-class citizen. It's this scalable API. You don't have to provision your own servers. It just does it up for you. Pretty cool.
AWS Amplify is really cool. Definitely worth checking out, especially as a front-end developer. Check all that out.
[Banjo music stops]
Chris: Okay. Just some questions for Marc. I would assume that you get some pressure from multiple sides on what to do next. Although, it sounds like you have an awful lot of direct control over what you're going to produce next. I will assume those two pressures are from companies. Maybe they're already your customers or maybe they're people just kind of suggesting to you that this is what they wish developers knew. Then the students themselves that want to know specific things. Where does most of that come from?
Marc: Yeah, well, since we're pretty much, a business term, B2C, directly to our customer. We do have maybe a thousand teams on there, so there are quite a few large companies on there as well. Primarily, it's developers that are subscribing out of their own pocket.
They definitely will be very, very active in support. We have a question mark on the site where people can talk to us. We've had tens of thousands of interactions with customers. Even the developers do customer service, so it's a collaborative effort talking with people, fixing the site, and taking their needs and putting it into the platform. Everything that we do, our roadmap, everything is taking into account those tens of thousands of conversations whether it is things that we record or features we add.
It's like people are asking all the time, like, "You have so many courses. How do I pick which one is right for me at the time?" We put together the learning paths and those learning paths are curated paths through our courses. That solved just an unreal amount of support requests.
Now, we have a lot of stuff with team billing and all that kind of stuff. We're building our team management process from scratch, from first principles. Everything is custom – everything is. It's going to work really, really smoothly for being able to onboard your teams and that kind of thing.
I know it's a roundabout way of answering your question but the point is, talking to customers, hearing their needs, they'll ask for something thousands of times. For me, we do have a couple advisors who also are teachers. We kind of review open proposals, but we'll get hundreds of proposals for every five or ten that we record. There is a lot of inbound interest from teachers. I wish we could record them all but I think it's a mix of who is well known for that, who really has a pulse on that particular community, and then the actual demand for the topic.
There are things like accessibility, which I find are really important that we include in the library. I think are important as well as design for developers, these kind of topics. Yeah, that was Sarah Drasner. Her stuff is more popular, but I would say that there are topics where doing that first principles thinking like maybe they're not going to be the most popular but they'll live for a really long time. They'll be really valid for a really long time and they're important. I think they're important.
Yeah, it's definitely maybe on the slower end when it comes to the latest hot new like Redwood framework or whatever. Awesome. That's cool. Like screencasts. We'll go screencast sites. We'll go crazy on all the latest, newest stuff.
I'm waiting for that production story. It's like, would I recommend that somebody actually go through the time to learn this to build this in a production sense? A lot of the things, even like everybody had hook stuff before us. But then it was like, no, we're going to wait and see until it's really in production, there's a production story. It's not beta. It's not alpha. It's not whatever. Okay, now is it the right time to do a full hooks training or whatever?
Chris: Yeah. That's interesting.
Marc: It's a little bit different mindset. I'm not going for, like—
Chris: You don't think that slowness has any negative business impact. This is a cliche example, but it's a little bit like Apple, right? They're never first out of the gate, but once they weigh in then you know that that's important.
Marc: Exactly.
Chris: That they're going to do it well or whatever. At least that's the cliche.
Marc: Exactly. Yeah, so we'll never be the first out of the gate to get the latest suspense thing in React or whatever. You've got to wait. We've got to wait until there are real companies shipping large, scalable apps on this stuff. Then we'll do the latest, hottest, newest React thing.
Dave: Yeah. How do you deal with old libraries? Like Vue, I know, is going to make a jump from like two to three and it's probably a significant enough change. React has hooks now and everyone is supposed to be doing hooks.
Marc: Yeah.
Dave: How do you handle these sort of stale things?
Marc: With the hook stuff and even with like state management, just in general, that problem in React, there is the class-based version that a lot of companies are deploying and have deployed out there. We do have to cover that in our state management course, both ways of here is how you manage state and set state. Here is how you manage it with hooks. Kind of covering both paradigms. You don't have to take the entire course but if you want to understand the entire surface area of managing state in React, you need both perspectives.
With Vue, coming back to your example with Vue, Vue too is a stable API. It's a stable set of APIs, and so we're not going to worry about that course of updating it every six months or something like that. Now that Vue 3 is getting to the point where people are using it and they're using it in production and it's getting to the point where there is enough community adoption, at that point, once we see it in production quite a bit and we're in touch with the team, we're in touch with the core team of all of these libraries like Sarah Drasner.
Chris: That doesn't hurt.
Marc: Yeah, Sarah Drasner is on the Vue team and so she says that Vue 3 isn't ready, which she did. We set the date. We were going to do the training and she said it's not ready. We set the date, we were going to do the training, and we said it's not ready.
Yeah, to your point, Chris, from a business perspective, in the short-term does it hurt us when floods of people go and learn the latest, hottest, newest thing on whatever screencast site or on Vue 3? People are doing stuff on all of these screencast sites, but we're going to be a little bit behind them and that's okay. It's like flood learn all the latest, newest things, great, but we have companies that are relying on us for their production decisions of what stuff they're going to build. It's not just companies, but individual careers.
I think it's great to experiment with the latest, hottest, newest thing, but it's the bleeding edge and it can cut you. I don't feel like that's a responsible approach to education that is just, "Go, go-go-go-go. Just put it out there and let everybody flood and, oh, make the money." No, that's not real development. That's cool for side-project development, little things, or brand new startup ideas or whatever. If you want to do that, great.
These are engineers that all of the top. You know, pretty much any company you use their product, we have customers there.
Chris: It's worth noting that some education can be dangerous, that it can be detrimental.
Marc: That's how I feel.
Chris: Yeah. That's wild, though. You know?
Marc: That's absolutely how I feel. I think it's irresponsible to be out there and just be like, "No, this is ready today. Check this out." It's just for views. I don't know.
To me, I understand it. Everybody has got to make money. Everybody has got to get an audience. Everybody has got to go for it, so I'm not trying to put other people down. But at the same time, I'm just saying our approach is a lot more laid back. Watch the community. Is the community adopting it and building real apps? Is there a real production story? Okay. Now let's dig our heels in.
Chris: That might be the difference between long-term and short-term plays, too. That's your philosophy to development but then it leaks its way into being that's your philosophy for the business as well.
Marc: Exactly. Right. Zero people have left the team. When we hire somebody, not to say not leave at some point, but the point is when we're thinking about a new hire, we're not, "Oh, man, this person is going to come on and then they're going to leave in a year, so we've got to get them in there and building stuff as fast as possible and extract as much as possible."
No, let's have a really awesome, epic set of benefits and let's really think about and take months to talk with people and figure out the right role and then let's enable them to really feel like part of the team. It's not just people building little, small one-off things. It's like everybody has a massive impact on the company and are taking large chunks of the business and of the software and building it. Everybody in the company can write code even down to our video producer, who said he would never write code, was able to write some CSS to adjust OBS's software.
Chris: Nice.
Marc: We have the right configuration for our buttons and stuff on the video software, and so I don't know. Yeah, like you said. That long-term thinking about every aspect, whether it's the education, wanting the courses to live a long time, whether it's the team, whether it's the teachers or even the things that we sponsor. We've been sponsoring Cooperpress, JavaScript Weekly, and all that kind of stuff. It's almost like seven years now. That kind of long-term thinking, I think -- I don't know. Unfortunately, not everybody can operate in that environment because a lot of the things that we're building as engineers are being built to sell, like VC-backed, go-go-go-go-go, like use whatever. Get it out there.
Chris: It sounds like a confident business strategy, for one thing. At the same time, you write blog posts that are like, "Hey, my plan is to try to not screw up," and I'm sure you have a healthy level of worry about this like we all do. Right?
Marc: Yeah. The current situation is really interesting because our entire model about the way that we record is relying on this nice in-person study with all this equipment and the people in the classroom interacting with the teacher.
Chris: Mm-hmm.
Marc: We're having to build basically the business up from the ground the entire way that we record. This team that I mentioned, everybody is here for the long-haul. We're thinking long-term and we're building the most epic production setup. It just looks amazing and it has all the characteristics.
Chris: What are you going to do? Get a box together with all the tripods, cameras, and stuff and ship it to somebody? "Here. You set it up." [Laughter]
Marc: Yeah, exactly. It's massive. Basically, you have to build walls behind you. There's a podium. Then there is all of the lighting is tweaked. We've got a CAD model of where everything needs to be.
As an instructor, the instructing experience is, you plug in via HDMI and you teach. That's it. You focus on the people that you're teaching, and so that's really what we're bringing to this. We have a laptop. Included in the kit is all of the production equipment that does everything locally so that we're able to run the show and be able to manage the whole AV stuff remotely.
Chris: It's useful now because, whatever, Coronavirus. But do you think it's going to continue to be useful after that has passed and it'll be like you might get some teachers that you couldn't have got otherwise? Just for business reasons, they're like, "I don't know. I don't feel like coming to Minneapolis, so sorry."
Marc: [Laughter] Yeah. Well, absolutely. Especially the international audience, it's a little bit more cumbersome to fly 14 hours to the studio. I think especially there, but this has been in the business plan for three and a half years to have this remote recording set up for various reasons. Being able to try things and do a lot of these trainings before coming and doing the full in-person studio, that was kind of the plan for years and years that I pitched the teachers and they just really wanted the in-person experience.
I think there are a lot of benefits. I don't want to promise on a podcast our future or whatever or pigeonhole us but, certainly, this is stuff we have thought about for years and years and years. It's just that having this environment kind of continues to accelerate things in that direction where now our in-person studio is shut down so we have to completely go all hands on deck, our entire team. All of our infrastructure, we're taking again that first-principles approach to this. It's looking really good and I'm really excited but, certainly, it's super unfortunate circumstances that this is what's forcing us to move in this direction. I wish it was kind of like--
Chris: I don't know. My gut feeling is it doesn't sound like much of a gamble. You know ten times more than I do, but it's like you were planning on doing it anyway. It, on the surface, seems like a good idea. It just opens up doors for you. It's a lot better situation than if you sell burritos, that's for sure, because you're kind of screwed. At least this was somewhere near.
Marc: I never like to be forced. Having that long-term kind of mindset, I never like to be forced and be reactionary, right?
Chris: Right.
Marc: I don't make the best decisions when I'm reactionary. The thing that gives me peace is, like I said, that it's been on the roadmap. It's something we plan to do anyway. Now we're just executing on it today rather than in a couple of years or two or three years.
Yeah, I mean the biggest thing for us is, are we able to educate more people more deeply? That is the mission of the company. Numbers have never been higher as far as people using the system. Per-user, it's up 50% per user. People are using the heck out of Frontend Masters right now.
Our mission is able to continue to educate more people more deeply. That's super, super awesome that we're able to, like you said. If you were selling burritos or something and your mission is related to food quality and delivering the best burritos or whatever but in our case delivering education, educating more people more deeply, we're able to do that in this environment. We'll create new ways and innovative ways of being able to produce that result of educating more people more deeply in this new environment.
For us, yeah, no matter what happens, that's the mission. We're doing it. We're continuing to do it. That's our measure of success.
Chris: Yeah.
Marc: Yeah.
Chris: What's coming? What do people want and what are you going to do? Do you got any interesting news to drop for upcoming courses?
Marc: Well, right now, yeah, right now it's completely all about this new production process. Our first test is going to be -- I shouldn't say test. Our first run, it's not going to be a test. It's going to be a production run will be with Brian Holdt since he's been training with us forever and has a lot of popular courses. He's a really fun one to work with on new stuff and so we're going to be building a digital pet game.
Again, the first principle was building. I think he's going to build it in React but that'll be a demo of how to assemble this stuff together. Then we'll give the assets so people can build their own version of the game in whatever technology they want to. That'll be a fun, new experiment.
Yeah, we have all sorts of stuff lined up like state machines are big right now. It's kind of an old concept, state machines, but people are applying it with XState and being able to visualize your state machines and that kind of stuff, which is really, really interesting. Obviously, Vue 3 is big. We just dropped machine learning, which was totally new for us and it's on Python.
Chris: Interesting. Interesting. Those seem big enough to be up your alley, you know. It's still new, but it's not so big that it's like, "Eh, that's going to stick around, for sure." I can imagine something like state machines. I don't know what your three understanding of them is but, man, if I read about them, seen talks about them, edited blog posts about them, I feel like I've spent plenty of time with state machines and I'm still a little like, "I don't get it." [Laughter]
Dave: Yeah.
Chris: A good course might be the thing that cracks it. I could see that being -- I don’t know.
Marc: Yeah. I mean David is going to be building a -- sorry, I interrupted you.
Chris: Oh, no.
Marc: He's going to be building the state machines with pure JavaScript before introducing other libraries, so it'll be interesting.
Chris: Yeah. I just mean that's the moment where you're like--I don't know--maybe your company decides that you're going to start using them and you're nervous for a minute. That might be a trigger pulling moment for you buying a course like that. Like, okay, I am actually going to sit and learn this for real.
Marc: Absolutely.
Dave: That's where all this online education stuff, like an actual course--not just 20 YouTubes that I watched in a playlist or something--seems valuable. I do client services, so I'm on a project for however many months. Then that project ends and I take a deep breath. I'm like, "Oh, god. What do I need to know next?" or something like that. Do you have a way to answer that question, like, "What do I learn next?"
Marc: Yeah, that's where the learning paths come into play. If you go to frontendmasters.com/learn, you can kind of see. We have a beginner path, professional path, an expert path, and that's kind of like, in general, the best practices of the day, interweaving everything from CSS to JavaScript to React to TypeScript to all sorts of stuff, like the entire industry. Whereas we have specific learning paths, which are dedicated to just JavaScript or just CSS or just individual things.
Yeah, the top paths, yeah, if you want to learn full-stack, there's a path for that. If you're a designer learning to code, that's a specific path. Those kind of higher-level paths encompass all the technology and then the specific deep dives are into very specific frameworks or languages or whatever.
We'll be continuing to build those out. I'm excited to build out. We actually have several Python courses now. We have several GraphQL courses, so that can be an entire path. Then we have an entire whole library of functional programming in JavaScript now from like basics all the way up to the hard-core functional kind of Haskell style functional.
As we get enough courses that kind of fit together in paths, and we kind of talk to the teachers of, like, this will be before yours or this will be after yours, so that they can kind of like make sure there's not too much overlap. Some overlap is okay, but to build out these learning paths. Putting them together also exposed that, oh, we have this hole here.
I feel like our CSS stuff isn't fully comprehensive. I really want to build out a full kind of nuts to bolts all the way to building what we just did, a pattern library design systems. It used to be called pattern libraries. Now they're called design systems, but a whole design--
Chris: I don't know. I don't know. Careful there, Marc.
Marc: Okay. Well, that's not my area.
Dave: Did you try style guide…?
Marc: Yeah. Design systems, we just recorded it. It's not out on the site yet, but it's cool what people are doing with storybook and componentizing all of their kind of designs into HTML.
Chris: That's great.
Marc: Yeah, it's interesting to see, with those learning paths, what our gaps are. I feel like I'm very well aware or our customers will write in, like, "I went from this course to this course. There was this giant gap and I had to learn over here." We're constantly reassessing and making sure that things are up-to-date. Yeah.
Dave: What I'm hearing you say is you need two people who are pretty good at CSS to fill in some CSS gaps. Is that right? Is that what you heard, Chris?
Marc: [Laughter] Yeah. This whole podcast is actually a pitch for you all to come and teach.
Chris: Yeah. [Laughter]
Dave: Okay.
Marc: That's the only reason.
Chris: I really want to do it. I'm just nervous that I don't have a thing to teach people right now. Just like Dave, I know tons of crap about building websites and I teach you about it, but I teach in these little bite-sized chunks. The workshops always make me feel nervous. I don't know if I have anything workshop worthy. You know?
Dave: I did one workshop about eight years ago and I'm still sweating.
[Laughter]
Marc: Well, I like the approach that you're taking with your screencast where you're taking a specific kind of thing and then you're building it. You're like, this is the way I would build it. Then here are some other ways that I could accomplish the same thing.
Chris: Yeah.
Marc: I think that I just like kind of your mindset or thinking behind how you're stumbling through different, like, "Oh, I could do it this way. Oh, this isn't working. I know that these tools exist." I don't know. I know there's something there, Chris. There's something definitely there.
Chris: There's something there. I know what you mean.
Marc: [Laughter]
Chris: I wonder if piecing smaller bits because the building a game thing, that's what's intimidating because not only do you need to build and build and build and build and build and then, at the end, you have a game. To be perfectly honest, my brain sometimes loses interest. You can't jump to video nine because in video seven they did all the asset management or something. You have to watch in order. I think most people do prefer that because then the end product is so cool. Whereas, I'm like, I wonder. No?
Marc: That definitely doesn't apply to all the courses. We have three different styles and I don't want to get into it too deeply but there is the build an entire app over a day approach. That's what you're talking about. You can't jump in towards the middle or the end.
Chris: Right.
Marc: There are componentized courses. For instance, we did complete entry-order React in that build an app style, but then we did intermediate React in the componentized world where you start from the same code base. You add a CSS library, whatever. Then you add TypeScript. Then you reset. Then you add unit testing. Then you reset. Each part of the course is its own module that you can just take that module.
There are different approaches where it doesn't have to build on prior knowledge throughout the entire course. There are courses that are just a series of, here is something that you can do; here is something that you can do; here is something that you can do. But it's just kind of under a collection. That's probably the approach that you should take is having these kind of micro examples that, if you zoom out and look at all of them, they kind of encompass a specific, larger area, but each individual model is a little bit different.
Chris: Yeah, that's definitely how I think, so that might work. It might just work.
Marc: It might just work. Well, we've gotta - gotta do it. Gotta do it.
Chris: Yeah. Don't worry. Okay. Dave, do you have any final words here?
Dave: No, I think that's great. Thanks for coming on, especially in this new normal and all that. Learning online is kind of the only way you can do it and I appreciate you sharing your perspective on all this. It's really helpful and, hopefully, people kind of get ideas and get inspired to pick something if, obviously, they have the ability. Marc, I guess for people who aren't following you and giving you money, how can they do that?
Marc: [Laughter] Well, yeah, twitter.com/frontendmasters is everything about the business and then twitter.com/onemarc is my Twitter, which is becoming more infrequent as I focus more and more on the business and the team. Whatever, but I don't know. I might experiment with some VR streaming. That's kind of what I've been into lately is virtual reality and maybe I'll do some streaming there. Yeah, you can follow me there.
Dave: Cool. Awesome. Thank you and thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about this show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month. If you hate your job, head over to ShopTalkShow.com/jobs and get a brand new one because people want to hire people like you. Chris, do you have anything else you'd like to say?
Chris: ShopTalkShow.com.