[email protected]
Episode 142 November 6, 2018 | 22min

Inspect Element: Diving Into The Complexity Of The Web

How do we respond to the levels of abstraction we’ve piled on to web development?

Show Notes

The Web is a Complex Place: Have you noticed that Track Changes has migrated off of Medium? That got us thinking about WordPress as a platform that’s changed enormously in the past few years. Front-end development has exploded. The way we use the web changed. No longer are we simply delivering pages and searching for things, we’re using the web to explore an infinite space. How can we deal with this level of abstraction? One thing is certain: the way we think of the web has changed, and it doesn’t look like our culture of tech is headed towards simplification.

Paul Ford WordPress has like two fields that you would change and they would just absolutely break everything and there was no way to fix it. And it was like the name of the site was one, like you’d change the name of the site and then you couldn’t get into the admin and you just would never see anything again [Rich laughs]. And suddenly all of that thing—all the—

Rich Ziade—all that beauty.

PF All the tools that they had created to make it easy [melted away] it was like, “Uh uh!” [Laughs] [Music fades in, plays alone for 24 seconds, ramps down] Ok. When you’re in a web browser, you can kinda right click or control click and it says, “Inspect the element,” and that gets you into this whole world where it shows you how the webpage works.

RZ Yeah.

PF I inspect the element many times a week.

RZ Me too.

PF Yeah.

RZ It’s one of the greatest things and people [music fades out] often don’t know that if you’re using the Chrome browser there is pretty much a full blown we development environment sitting there.

PF All of them now—all of them, including Firefox—

RZ Yeah, Firefox has a great one. I think it’s the same one!

PF It’s very—they’re all very similar at this point.

RZ It’s gotta be like off of some fork but it’s this whole world of tool that allows you to peak in and see how things work.

PF But the reason that exists is it reacts to—it’s reacting—sorry no pun, there’s a big framework called React—to the incredible complexity that’s happened to the web. And this is a tricky one because you and I [in old man voice, as if with underbite, and raspy], we sound like old timers, you know, “Ay! The web is very complex! It used to be simple in my day!” But, ah man, it’s tough in there right now.

RZ I mean with a real—real world example: we’re—we’re very proud to have migrated off of Medium. All of our content on Track Changes’ Newsletter which, by the way, you can sign up to, it’s not just the podcast.

PF I should say I’m an advisor to Medium. Still love Medium.

RZ Medium’s great.

[1:51]

PF Doing good with Medium.

RZ Medium’s really nice.

PF But we wanted to own our content, have our own SEO, and we [correct]—we sort of boot strapped an identity for ourselves on Medium but now it was time to [correct] have our own WordPress blog [correct], essentially.

RZ And—and with that came some tweaks to the marketing and whatnot. And we were on our own hosting environment and we just were controlling and there were some rough edges that needed to be cleaned up and I—I peered in and I said, “You know, this is interesting. I have ideas for some fixes here that are just low hanging fruit.”

PF So anyway—

RZ So our head of product—

PF Yeah.

RZ Chris LoSacco, bless his heart [mm hmm], said, “Why don’t you just set up your own dev environment and see how things go?”

PF Which meant that you turned immediately to me and said, “Let’s set up your own dev environment.”

RZ And Gina Trapani, uh another partner at Postlight, bless her heart, wrote instructions on GitHub on how to set up your own dev environment.

PF Now have—did you succeed?

RZ No. I hit a wall within about three minutes. So let’s back up here, right? By the way, we migrated to WordPress.

PF Right.

RZ Bless its heart as well.

PF Yeah. And also people, including us, have trashed WordPress many times.

[3:04]

RZ It is a pillar on which the web stands today.

PF I think in the last couple of years it got—it just got a better story. It got more stable. It is a piece of—and I don’t mean this in a bad way: it’s like an enterprise software tool for publishing a certain amount of content.

RZ It hits its wall but it—it really is—I mean it’s pervasive and it’s a very powerful tool.

PF Unless you know what you need to do when you’re publishing con—like unless you have very specific requirements, I wouldn’t suggest anything else.

RZ It just does the job, right?

PF Yeah.

RZ And—and—you know, of course, there are other industrial strength CMSs out there but it—it does an excellent job.

PF It just makes web pages and everybody knows it.

RZ So we get on WordPress and Paul spends about five hours trying to set up a dev environment.

PF Now, people need to understand: this is actually important for me to do. Like I love to understand this part of the world and when I hit a wall it’s not me getting frustrated and stomping the table, it’s me going like, “Oh, what do I need to learn to see how this new world works?”

RZ Learning is growth, right?

PF That’s right.

RZ So, we have some incredibly sharp, talented engineers in this company [mm hmm]. Like it’s the real deal. It’s not—it’s—

PF You know maybe cuz I have twins I feel that everytime we say that we also need to say: we have great designers and wonderful product managers as well.

RZ It’s all wonderful!

[4:18]

PF But we have a—I think everyone in the organization knows like the—you know, what we say is product leads, design drives, and engineering builds. And we have—

RZ And it’s real.

PF—this like . . . machine. This forceful engine [yes] of engineering.

RZ Yes. And so I say that because this is not a spectac—this is not the re—the outcome of a spectacular fair—failure but actually the spa—status quo of how things work now. Paul needed five hours. Paul’s a relatively intelligent person and could not get this—it was five hours straight and—

PF 80 percent of there—80 percent of what I found was me just learning what the things were, right?

RZ Yeah. Let’s have an exercise here because I actually do understand where we’ve gotten to but I want to this as if I’m an old man and someone just ran across my lawn and I took my water bottle and threw it at those punk kids.

PF Ok, “Get off my digital lawn.”

RZ So, I’m gonna rewind back, let’s go to 2006, 7.

PF Ok. Yeah.

RZ It’s all the same. But 2006-7.

PF And that’s a critical juncture year for the web. You got—suddenly Google Maps shows up; JavaScript’s taking over; Ajax; Flickr.

RZ Yes. Yes. So I had a website.

PF Mm hmm.

RZ On WordPress.

PF Mm hmm.

RZ At hosting provider A.

PF Ok.

[5:35]

RZ And I’ve decided that there’s a much faster, cheaper hosting provider B.

PF Ok.

RZ Ok? I log into WordPress. I need to get my content out, first.

PF Mm hmm. Mm hmm.

RZ Ok? It has an import/export facility. I hit export, it kinda blobs it all up [mm hmm], the media’s in one place, the data: the posts and the users and whatnot are in another place [mm hmm], essentially, I think and I’m not 100 percent certain, it was probably an xml file.

PF Ok. Yeah, for WordPress back then, sure.

RZ Yeah. And it put it in a zip file, conveniently, and handed it to me.

PF Great.

RZ Ok? I set up hosting provider B [uh huh], moved the domain, did all the stuff that needed to happen, and then I went into the hosting site [uh huh], there’s like a control panel. We should talk about this for 60 seconds. Most hosting providers pretty much use the same control panel for things like password protecting the site—

PF You go to a webpage and it had like nine little icons. It was like, “Set up your blog”; “Manage your database”; “Change—add a user.”

RZ That’s right. It was very basic.

PF Very, very simple systems of administration for most—for people who needed to host their website; put up a brochure online; do some stuff.

RZ Correct, correct. So, I hit the panel and then I said, “Oh I’m gonna use WordPress,” because you don’t have to use WordPress. You could use it to be like a personal vanity site [sure], or—or a comp—you know a storefront site [mm hmm] but I wanna use WordPress so I hit a button. It essentially spun up WordPress.

PF Right.

RZ Which took care of all of the nuts and bolts of it. There was a database—

PF Standing up WordPress, that’s right, you gotta stand up a MySQL database; you gotta make sure PHP is installed. There’s like a little bit of ritual, except that WordPress is pretty good at that like one click to play.

RZ Correct.

[7:17]

PF All the other pieces fall in line behind it.

RZ That’s right and it put up that—that default theme and it just says, “Hello, first post,” or something.

PF That’s right.

RZ And then I go to the import section of the ad—of WordPress admin. Of course it creates my username, import section, I import all the data and there it is, sitting there. So, let’s accelerate this, now the theme, I could bring it over. It’d probably take me a little while, not m—not much, actually. It’s not that bad because there are a set of templates that are pretty—pretty well defined in WordPress, there’s, you know, the blog post; the uh category, et cetera, et cetera. And probably within an hour, hour and a half, I could pretty much be in place. So, it’s very little overhead. That’s 2007. Now [mm hmm], as we understand technology, more pixels get jammed into screens [mm hmm]; computers get smaller. They’re in my pocket at this point. Things advance, right? Such that when you look back on the timeline uh you would say, “Oh my god! I can’t believe we used to do it that way back then [right]. It’s just crazy.”

PF Right.

RZ Right? So, fast forward to today and you are trying to set up WordPress, you have the data, and  you are trying to set it up on your laptop as a dev environment and it—you—for five hours! You are churning through and your console is fly—I’m [music fades in]—I’m sitting next to you and it’s just flying by with all kinds of bullshit [music plays alone for eight seconds, ramps down].

[Ad spot]

PF Hey Rich [music fades out], let’s interrupt for a second and tell people that if they need to solve complexity in their own organization.

RZ And want to build something really sophisticated that would really in other—in many instances, demand complexity, they should get in touch with us.

PF We will take really, really baffling stuff, and make it simple for you to build new things.

RZ And simple to use.

PF That’s right.

[9:13]

RZ We’ve got great designers as well.

PF And then we’ll hand it off to your engineering team or your inhouse product team and they’ll feel really good about it.

RZ Yes.

PF That’s how we work. We’re Postlight and you can send an email to us at [email protected] That goes to me and Rich [music fades in] . . . and we like gettin’ them. Let’s get back to the show [music plays alone for eight seconds, ramps down].

RZ Technology, on almost all levels [music fades out], has advanced, and has gotten better, and smarter, and faster, and sharper, and quicker, and it’s just in all ways has gotten to a place where it’s just—it continues its march, right? It’s the story of technology, right? How did we end up in a place where what used to take me an hour in 2005, you couldn’t pull off in six hours, including bathroom breaks, in 2018?

PF How did we end up in that place?

RZ How did we end up in that place?

PF The—the way that everything happens in technology which is that you build levels of abstraction and instead of—see, I think what’s really changed is there isn’t one common language of the web. Up until about six or seven years ago, you would learn HTML and then you would learn CSS, and you’d learn a little JavaScript, probably JQuery, and it was mostly about dressing up the elements on the page, making ‘em move around, click, accept the terms of service—things like that.

RZ Ok.

PF Ok, so everybody who worked on the web kind of had one understanding and it was all about how the web browser interpreted pages. And you might use a CMS to make pages, you might, uh have a backend in WordPress or whatever but—

RZ The document still prevailed.

[10:59]

PF That’s right! And so most of the work—most of the important work on the web happened on the back end, you were making pages out of databases, you were designing, and—and organizing things so that you could show that content. And then . . . around 2010, the frontend revolution just exploded. JavaScript was really, really fast and this all started well before this but it just felt like it started to get really up to speed around between 2010 – 2012.

RZ Some innovations showed up too.

PF Suddenly frontend frameworks show up. Frontend frameworks allow you to see the web browser truly as a software delivery platform and not just—sure, like Twitter does that or Mint does that or your bank does that, right? Like they’re not publishing a newspaper, they’re creating tools that you fill out forms, and you check your balance, and they show you charts. Like that’s software in a kinda classic way.

RZ Not pages as a paradigm.

PF Which—which are also like delivering a page is also—in a browser—is also a software problem but it’s just—we’re out of the page paradigm. We’re thinking—and then you’ve got stuff floating around in the background that’s been going on for awhile like Google Maps which is clearly not a webpage.

RZ In some ways, in many ways a watershed moment in terms of: Ok. The web is another thing.

PF That’s right. Well—wait, suddenly the web, instead of being a way to deliver pages or to search for things or even a way to fill out forms and buy things, became a tool for exploring an infinite space. Like it was just like—

RZ Yeah, it was—

PF “Hey! Here’s a zoomable map of the world.” You could never have this on one hard drive. I can’t give this to you.

RZ Yeah.

PF But you can access it and you can only access it [yeah] through the web browser.

RZ Yeah. And—and—and [stammers] I mean it’s worth noting: I mean the interactions were so sophisticated. I mean you had [that’s right] MapQuest and older maps out there.

[12:49]

PF No but you were always clicking that little plus sign and they would get—zoom in and it would be like one-eighth of the screen [chuckles].

RZ It was archaic. Yeah.

PF It would be like, “Broadway!”

RZ And you accepted it. It was like, “Wow! A web page is showing me a map.”

PF Well before that you used to walk around with Hagstrom maps and try to figure out where you were in Brooklyn.

RZ Right.

PF So—so you got these watershed moments but suddenly you have these frameworks and the frameworks are saying . . . they look like HTML a little bit but they’re saying, “Let’s not worry too much about documents. Hey, you’re gonna have a person who logs in. Well, they’re gonna have an account component, and the account component there’ll be a dropdown menu that has—whether they’re—there’ll be a little light and the light’ll shine if they’re uh logged in or not, and if you click on that light it’ll bring up five other components that will show them like where their friends.” And so now you’re thinking about this sort of hierarchy of objects.

RZ When you click today on the web, rarely does the web browser turn white.

PF Right.

RZ To take you to the next thing.

PF But now suddenly cloud services are showing up and you can store that data and do things [yeah] with it. Like, one of the reasons you couldn’t have really interesting applications maybe ten years ago was it was really hard for a place that wasn’t at like a Yahoo scale [yeah] to build the database infrastructure. It’s hard to scale things! If you are gonna have a couple million users like I dunno, you know, Twitter just failed for like four years [yeah]. And it was such a—like they had a logo, the fail whale, that—

RZ Became an icon for them.

PF It was associated with the place. Like—

RZ The demands of the web. It wasn’t just that technology had advanced but also the expectations had changed. I think what happened here was a platform like WordPress uh which predates a lot of these innovations and advancements got sucked into the culture, today’s culture of development—of web development, and what ended up happening was you put all this sophistication and complexity on something that actually took enormous pride in not having it.

[14:45]

PF First of all: I’m actually probably a little more optimistic and accepting of all this than you are [ok]. I think you got really frustrated when you’re like, “This used to be simple and now it’s hard.”

RZ Right.

PF It’s hard because, yes, we have a sense that, you know, things need to be responsive, and responsive can mean a couple of things but it can also mean like you can let the backend computer do lots of work, you can let the server do lots of work to create really interesting, on demand images and experiences for people [right] based on what kind of device they’re using. Well, how do you do that? Well, you don’t just assume that a file with some CSS is gonna be enough, you create a little server that adapts the content to how people are looking. That’s a good thing. But the abstraction that it introduces and the level of complexity it introduces is pretty bad, it’s pretty hard to handle. Here’s the thing that is actually—an abstraction that I love is SVG files. They are vector graphics, they scale infinitely. You don’t think about that very much. They just sorta fly across the internet. That’s a great one cuz it—it is, they’re truly responsive. You need to print a billboard? You can. You need to get something that’s tiny?

RZ More tied to illustration.

PF Things like that like there are ways to approach and think through this stuff but right now we’re in a place that feels very almost adolescent. We’re caught between a simple world where you’d set something up with a couple buttons and everybody what the frameworks underneath were to 50 different ways of doing things, different languages. Sometimes people like to deploy things as containers that are all—all the software’s wrapped up and ready to go. A lot of the energy in the industry is around doing things that will run on 10,000 computers at once. And a lot of that complexity has come to rest also on processes like setting up one website because that’s just where we’re at.

RZ Yeah and I think the opening here is taken advantage of by the likes of a Squarespace that is—like you’re not ever, ever gonna see any of that. Right? We’re gonna—Shopify! Squarespace!

PF We’re gonna deliver it purely as software with no administration.

RZ You can’t break it. You don’t deploy it.

[16:52]

PF This was the proposition of Windows, right? Should deploying a website feel more like using Windows or more like running a batch script?

RZ Right. Ok, so Paul I go through this and it’s emotional for me and complicated and I’m not understanding why things are the way they are and complicated the way they are. But I kinda came to a realization: it’s not five pages, or ten pages. It’s actually a content-driven site and it has complexity—

PF It’s a platform.

RZ It’s a platform and—and—

PF That’s the thing: you’re trying to get back to a WordPress where it was like, “Hey, we’re gonna put a hundred pages in the page hole and people are gonna come and look at ‘em.”

RZ And it’s not working like that—

PF No, it’s a system.

RZ It’s a system and there’s a lot more to it and maintaining—

PF There’s lots of users, there’s workflow, there’s editorial workflow, there’s versioning, there’s assets, responsive design, there are different par—there’s architecture and there are pages and posts. I mean it is large and complex and then there’s plugins that connect to all that and JavaScript in the front and PHP in the back. Like it is quite a thing.

RZ It is quite a thing and so, for me, it’s, you know, I paused and said, “Ok, so, this isn’t straightforward. There’s a lot of work that had to go into this and the complexity level is really there and it’s not 2006 anymore and the demands are different and—”

PF Well, and remember, the task was for people to—this is where it’s complicated: you’re a systems guy, you’re a platform guy, and you look at this platform. That wasn’t the task. The task was to set up a good WordPress environment, you know, with the assets and make it responsive [mm hmm], ok? So I think that everybody kinda did that according to best practices.

RZ That’s right.

PF What’s frustrating to you are the best practices.

RZ Yes. Yes. And I—I think the realization, the lesson I’ve gotten out of this, is that the web has changed so dramatically.

PF It has but let’s be—let’s be really clear here: complexity is a symptom. It is not a good thing.

[18:51]

RZ It’s not.

PF And so like—

RZ I think that’s a bigger conversation.

PF That’s right. This is not a criticism of our team, this is a criticism of where we are as a technology culture right now. Here’s my observation of all of this: there used to be one way to do things and—and there used to be kinda one web, and I think part of that—your reaction is partly because there isn’t one web anymore. There’s 20, there’s 30, there’s the document based one, there’s how academics publish things, there’s people uploading PDFs, and then there’s interactive software systems that connect to giant databases on the back, and then there’s social, and each one of them has its own culture.

RZ And—and the complexities have skyrocketed—

PF They—

RZ And I think that’s real.

PF They have because what’s really changed is that you’re—you’re writing reactive software that has to respond in real time to human beings doing things and then upon that maybe—

RZ Talk to a server file.

PF Talk to a server and come all the way back and that needs to happen in a couple milliseconds [yeah]. That is a very different way of thinking than if I can—

RZ Publish the webpage.

PF Well cuz the web was, “If I can squeeze this page over a crappy modem so that it’s in front of your face and you can then scroll up and down and read it, I did my job.”

RZ Yes.

PF That is not the job anymore. Unfortunately [no] cuz they’re—and—and I think that—

RZ And to my point earlier: did WordPress have to get sucked into that? Like get caught in the river, the raging river? No, it really didn’t.

[20:17]

PF Well, and there is a way to still do one push button WordPress, right? But not with the frontend and not with the responsive and it just all gets complicated. There’s a lot to do. The thing is, Rich, I think there is no way forward without more abstractions cuz [music fades in] everything’s getting bigger and harder [music plays alone for four seconds, continues]. Well, Rich . . .

RZ We said nothing.

PF [Chuckles] Abstractions are hard. Complexity is hard. We—we thought we—when we walked in here we really had strong points of view and as I talked to you I’m like, “Oh my god, it’s a giant spongy mess.”

RZ Yeah, I—I—I think—I think uh everybody, you know, trumpets a lot of the ease of doing things today—

PF Well, there’s—

RZ I think there’s actually a lack of empathy right now in terms of—

PF There’s so many solutions!

RZ There’s so many solutions and—and when you hand that thing off to that person across the hall who’s gonna pick up the code, um it’s not straightforward anymore. Uh—

PF Well and rarely is the problem—the solution shows up long before the problem is made clear.

RZ Yeah.

PF You know?

RZ No, I mean, lesson learned here: the web is a far more complex place now. It’s a software platform.

PF It’s where we live. It’s messy.

RZ Yup.

PF Alright, well, uh if you need us: [email protected] We—

RZ If you’re looking for a very complex piece of software [Paul laughs]—uh—

PF Or if you need something simplified because this is the ethos of the place like we’re—we do like it simple.

RZ We do like it simple but we build big, sprawling things.

PF Well, what we do is we make—take really complicated APIs and create end—endpoints and services that make it really simple so that people can build products on top of them.

RZ Correct.

PF Let’s get outta here [music ramps up].

RZ Buh bye! [Music plays alone for six seconds, fades out to end.]