[~15 second musical intro jingle composed by Madalyn Merkey] Laurel 0:19 Hi, Philip. It's great to have you on the HTML Energy podcast. Thanks for your energy today. Philip 0:27 Cool, I hope I have energy. Laurel 0:29 Yeah, and so before we start, I just thought it would be cool to tell the HTML Energy listeners a little bit about you and why I thought it would be cool to talk to you on the podcast. So I wanted to bring Philip Guo onto the podcast because of his interest and activity and publishing to the web. Phillips currently a professor at UC San Diego teaching human computer interaction courses and conducting research about learning programming. But what I most appreciate about Philip’s practice is how he conceives of many different publishing activities under his main website, pgbovine.net, which I read recently is now in its 23rd year since since 1997 (in different versions or iterations). And in addition to housing his academic work, his website also contains articles, vlogs, and podcasts. I personally like checking in on his vlog every now and then, and I especially like that he talks about topics most other professors or people in his field aren't talking about. And I guess that was about two months ago now that I went on Philip’s podcast. And near the end, we talked about Philip’s interest in passing on tacit, expert, or unspoken knowledge, and sustaining creative work. So I guess with all that said, maybe I want to start off some simple and ask you, Philip… What does the phrase HTML energy mean to you? Philip 2:03 Yeah, that's a really good question. I think that HTML energy to me means… I would focus on the HTML part. So it has this old school bare bones meaning. Like this raw energy that you could “view source”. And, in theory, in the old days at least, and maybe even now, on your handcrafted website you can actually see the raw HTML and see that behind these web pages, or these works of design or art … there's not really any magic. It's all human readable. And we can get into later about how that may not be the case with many modern websites. But at least in its pure form, this HTML energy to me means that everything is there for people to look at and to learn from. And that’s the spirit of the early web, and now even the “indie web”. It’s this very open sort of energy that's very pure… that's my concise way of putting it. Laurel 3:07 Cool. That makes sense. So view source is really important to HTML energy. Philip 3:13 Yeah, that was the first thing that's on my mind. You know, when I see HTML, I think about view source. Laurel 3:19 So could you describe the first website you've ever made? And do you remember specifically what excited you to make it in the first place? Philip 3:30 Yeah, this gets back how I’m really old. Like 23 years ago… that was what 1997. So 1997 was around 23 years ago, I can do math. I'm older than many listeners maybe which scares me. My first website was probably one of my personal websites. I can put the link on later if we have room for links. But I actually have a thing on my web page where I list all my old web pages, and I'm looking at it now. The first one was March 1997 when I was in eighth grade… I was in middle school. It was just like a single page. I think I just wanted to experiment with HTML because we had a ISP, an internet service provider, which gave you one megabyte or two megabytes of web hosting. And you could use FTP and put on a page or put on images or whatever, and it will just display right with some URL like www.(your ISP).com/~(whatever your username was). And that seemed magical to me because, in theory, anyone with a web browser (back then they were on AOL or whatever early web services people were on)… they could just go to this URL, type in this thing, and actually see what you put on there… which seemed magical to me. Because I was a kid, like 12 years old. So that was pretty magical that someone who's a kid that in theory anyone in the world could see. So I just would make webpages about games. I think the first one just had some pictures of games that I liked playing. There wasn't actually much content, just images or in-game screenshots or whatever. Laurel 5:18 Do you remember what kind of games you were into? Philip 5:21 Yeah, I have it pulled up right here… There's Command and Conquer, Duke Nukem 3D, and Quake. So it was these realtime strategy games and early first person shooters in the mid 90s. Laurel 5:34 Who was the audience for this website? Was it mostly your friends, or… ? Philip 5:40 Yeah, I think so. Implicitly I guess it was. The only people who would know about it would be people I told. So I guess it would be friends. Not that like people cared that much about it then. I remember it wasn't like, “Oh, everyone's making a website. You have to make a website.” I think I knew several other kids in my school who were starting to get into it, but it was very early. It was very pure that way. There wasn't much content at all. It wasn’t like it was actually for any purpose. Laurel 6:15 So what's your favorite HTML element? Philip 6:18 Oh, yeah, I saw that question. I didn't actually prepare for it. But I think I have a good answer. So my favorite HTML element is . Even though my website is 23 years old, it still uses tables. If you view source on it… I’m just laughing… yeah, I think it is just a
with ’s and
’s and stuff. It's because back in the old days it was really hard to get CSS to work, especially if you wanted to make a tabular sort of layout. It just made the most sense to use a because that's the layout I wanted. And back when I started this 10 or 15 years ago, there wasn't a lot of resources online for understanding CSS. So it was really hard to get the CSS to work. And I was paranoid about it not working in different browsers. So I thought that
layout was the easiest because you can do the rows and columns. You can also merge rows and stuff. I think I knew about it because I used Microsoft FrontPage (like way back in the day as the GUI tool to make webpages). And you can make a table and merge the rows and columns. It's very similar if you use like Microsoft Word or Google Docs… you just make a table and then you can have tabular data—rows and columns. You can also merge the columns or rows to make like more complex layouts. I thought that was really intuitive. So even when I hand-wrote the HTML, I didn't learn until years later this whole idea of semantic markup. That if you're a purist about it, you really should not be using tables for things that are not data tables. You shouldn't be using tables for layout. You should be using all the right CSS things. But I just kept it since. So I guess
is my favorite. Laurel 8:19 Cool, that's a good answer. And your current website and its current iteration… Could you briefly describe this website? And could you tell us a little bit about the evolution to how you got to this website? Philip 8:35 Yeah, so my current website is just a dumping ground for mostly written articles. So there's just a ton of written articles. It looks kind of like a blog. There's the sidebar with categories. There's tags. I just tagged my own articles. So it's really the grounds for articles. So the layout is optimized for writing… so it's not too wide. With the fonts, if you zoom in, it looks like you’re in a reader mode or on the Kindle or something. It’s optimized for writing. I do have pictures sometimes in the articles, but the layout is pretty narrow, it's not really well optimized for pictures. So I would say the site is optimized for written content. So it's a combination of articles I have… also the podcasts and vlogs, but those are basically just embedded YouTube videos or links to YouTubes… and then I have my academic work, which is my professional work. I have a list of publications that links to the PDFs, I have my resume, teaching information and stuff. It's mostly for written content, but it doubles as my professional website as well. And for its evolution… as I got older, it became more about writing and professional stuff. And when I was younger, it was more freeform. I didn’t have this kind of style, this kind of more rigid structure. I would just make pages on whatever and it looked really ugly, and pictures were everywhere. But that was the early days. Laurel 10:12 And your current website… how would you describe the HTML energy of it? Or does it have the type of HTML energy as you would like it to have? Philip 10:24 Yeah, that's a great question. I guess it has less of the HTML energy than the old one when I was a kid… if we take the “energy” part of the word or phrase. The old ones probably had more energy because they had wilder colors and pictures everywhere and the layouts were messy. There also wasn't much content on the old ones… it was like a dumping ground for whatever I felt like, putting pictures on and describing them. I would say the modern incarnation my site has less energy. It's more subdued because I have hundreds of articles and other kinds of videos and pages on there. I guess it's more polished or subdued. And with the last part of your question, I would like it to have more energy… from time to time, I always dream of doing like a redesign or something, but I never have time to get around to it. I would like something that's in between. Something that still is scalable. That you can put a lot of articles and a lot of content on but something that is a bit more visually flexible. Like the canonical example is… I can't really easily embed images in my articles because the layouts kind of narrow. The images aren't big. So you have to click on them and they'll go to a separate page. I really like modern sites that are responsive and flow well, they resize well. They allow you to embed images really well. So for example, you can click on images and expand inline. There’s always this conflict of imagery and text. Because for texts, you really want it kind of narrow, you want bigger font, you want it to be readable, like the Kindle or something. But if you want to use multimedia for images, you do need that width and that size. But you don't want to take up all that size with text because then it's unreadable. So I guess the fhe fundamental issue is using web pages as a document format… documents where you can read easily, which I've optimized for lately… versus using web pages as multimedia, where you want more flexibility, you want more responsiveness. I’ve veered toward the text so far. Laurel 12:43 Right. And that might also be easier because the web was originally started as a place to share documents. So maybe you’re balancing what you want and what the tool is good for… Philip 12:58 Yeah. I would say there is less of this impedance mismatch or friction. Like if you're using it as a document type format, the CSS for document type stuff actually makes sense to me… like font sizes and spacing and stuff like that makes sense. So trying to do CSS with more complex flows, where you want to do multimedia and text all together. While anything is possible, it is a lot. You do have to learn more about stuff that I haven't got time to go into… but maybe this will inspire me to do this. Laurel 13:33 Yeah, and then going under the hood of your website, I know that you created a your own static site generator to create HTML from more complex code. Could you describe a little bit about that process or what it's like to update your website? Philip 13:55 Yeah, so I met the static site generator years before that was like a term. So I made the modern incarnation of the site in 2006. So that was, oh my god, it was 15 years ago. It was right when I started grad school, when I started my PhD program, at that time in 2006, I had maybe a dozen or so articles written, maybe 10 or so. And then I saw patterns… like every article has some summary. At the top, there's a title, a date. There's a summary box usually and then there's just a bunch of text. And back then I was just writing manual in HTML in the text editor and I was copying and pasting a lot right because I had a header and a menu bar and a sidebar also. And then I realized if I wanted more pages I should have some way to generate it. I remember I had this thing where I was against doing stuff on the server side. I didn't want to do have a PHP site set up… you needed Apache and PHP and all that configured so that you could do the dynamic site generation there. That was the traditional way to do it, at least back then, in PHP, which is actually very elegant. With the PHP solution, you need a server that can run PHP on some web server like Apache, and you have to configure or your web hosting needs to support it. And then you make a PHP page that looks basically like HTML, except that it has PHP code with a tag that says “Go load this from the database” I guess WordPress probably works this way too. “Go load this data and render on the page.” Whenever you visit that page, it actually runs the PHP code on the server to generate that page for you. I remember I always didn't want to do that because a lot of web hosting back then, at least the cheap web hosting, didn't support running scripts. It was just literally static. You have to upload your HTML, your images, and stuff. I remember back in college that web hosting did not support scripting and you needed to get a separate service to do it. I didn’t want to do it. So I always had this desire to do static pages, like pure HTML. So the way to solve that without using PHP or server side rendering is to do a static site generator, which basically means that you do the code yourself run it on your computer to just generate all the hundreds of HTML pages. So I wrote this set of Python scripts I still run today. And it's funny, it's 16 years old, but I still run it everyday when I update the webpage. The input format is like Markdown, which actually came out around then (showing how old I am). So it's the pages written in Markdown, where you have tags and the text. It feels very natural for me to write. It's like you're editing a piece of text. And then I have a little header that’s in a YAML format so it's like JSON but more lightweight. It has tags, like “title: (title of the page” and next line… “date: whatever” and next line “summary: whatever”. So I have a little header for each article. And I have hundreds of articles. Each article is basically a little YAML header. And then the rest of it is Markdown, I just like have a delimiter somewhere. And my Python scripts literally parse those text files and it knows that the first part is a header and it parses the YAML and then knows the rest is Markdown parses it. It takes in the hundreds of raw text files that I have my directory and just renders that HTML. It just uses Python code and is not very high tech. It uses Python code to write out HTML, convert the Markdown to HTML, convert the YAML to HTML. And then because all the headers have them, all the metadata like tags and stuff, I'm able to generate a sidebar with the tags and and then with cross references and everything. Then it's funny, because throughout these years, I've evolved my own syntax. So for example, if you put some kind of markup format, like “link: some HTML”, if that HTML page is within my website, I can actually generate a link to it and, and render the title of that page. So that's a really fast way for me to link to different pages within my website because I use a little tag. Another shortcut tag I have is publication. So if I want to reference my papers, there's a publication tag that I reference one of my publications with… metadata and YAML format… it will just print out the title of the paper and the author's and a link to the PDF. I just run it every time offline. I use a service / script to upload it to the server. So from the server's perspective, it's just a few hundred HTML files and image files, and it doesn't need any kind of scripting. It’s super reliable. I use a cheap web hosting service. It's super reliable. It's fast. Also, it's funny because like nowadays people care a lot about page speed and mobile and everything. And people optimize the heck out of their dynamic web applications. But for me it's actually really fast. Because there's actually nothing to load. I've never even tried to optimize. I'm sure I could optimize it for speed and stuff, but I didn't really need to because everything is just HTML. So that's my long winded way of saying I made that. Laurel 19:37 It's really fascinating. I'm wondering now, because today there are so many static site generators available for people to use… Do you feel like it was valuable for you to learn, like under the hood, how to make one yourself? Philip 19:56 Yeah, completely. 100%. And you know, part of this is also a good exercise to just get better at programming. I didn't do a ton of programming back then. But I wanted to do more, and maintaining a website and scripting it it was a great motivator because it was something I actually use for myself. It wasn't just a toy project. So absolutely. It's this idea of using code to automate things and to prevent manual duplication. The reason I did this originally is because I literally just copied before having a generator. I would just write HTML by hand and tweak it. And then I literally just copied and pasted like every page was just copy and paste. I would change the body, the content, and if I wanted to change the header, I would have to go and change it for all the pages. And so whenever you recognize there's this manual duplication going on, you can imagine using a program to solve that. And another thing that's nice about this static site generators is that you're processing text. It's all just plain text. There's no funny business going on. I guess this goes back to the HTML theme earlier. Like, it's all just plain text. And you can parse it and you can generate it. It's so flexible. And the other cool thing is now that I have my agenda, I can add little syntax or extra things. I added this “link checker”. I have so many pages, and I wanted to make sure that the links were all working. So it's all in my giant script, I can generate all the pages and I can check that all the links I put inside all work. So all this stuff you could do with external tools, but it's simple enough code that it's within the realm of one person doing and making this sort of bespoke or handcrafted, artisanal software for yourself. I think it's very valuable because it's within the realm of what you can do. I wouldn't hand write my own video conferencing software. That would be silly. That's so complicated, you clearly want to use somebody else's. But for something like this, it's a great thing to do your own because you can customize it for your needs. Laurel 22:16 That also reminds me of this IndieWeb principle. Maybe you've heard of this called “Manual until it hurts”. I think there's such a trend in automation today that it's helpful to first go through the actual work of realizing that you're already doing something and you've been doing it enough times that you realize it would be really worthwhile for you to automate. But until you know that it's worthwhile to automate, it’s almost good to wait on the automation. But it seems like you went through a process of being like, “Well, I've been doing this a long time, so maybe it's time to like make my own…” Philip 22:59 Yeah. I totally agree with that. It's also like you viscerally understand why you're doing that. Nowadays if people are starting up websites, there are so many options. Do you use a hosted service? Do you use Squarespace or Wix? Or one of these hosted ones, these WYSIWYG things? Do you use a WordPress installation? And if so, do you host it with them, do you host it yourself? What plugins do you use? Do you do a static site generator? People hear all these buzzwords of things. Then you see these stories on Twitter about how I tried to install the static site generator, and I can't install it because like it needs some Ruby thing. And then you go down this dependency chain and all you wanted to do was make a website. I save screenshots of this, like I have this morbid curiosity of this these days. I just want to make a website and put it on the web in 2020. I need to put up this static site generator, I need to configure my web hosting, and I can't even build it because it has some Ruby or Python error and stuff. And I think it’s important to do it manually so you can see what's going on at every step. And then seeing there is this complexity bar here that I have over 10 pages that I'm duplicating I should start automating somewhere. If you have one page, you probably don't need automate. Laurel 24:20 Yeah, totally. Like you said, it’s a visceral or embodied reason for doing this automation. So I have a specific question about your website, maybe more holistically. We talked about how you have this curiosity about how people sustain creative work. And I'm curious… What part of the puzzle does your website plays in that goal for you? Philip 24:49 That's a deep question. I think that it's been my primary creative outlet for years,for decades. Lately, I've been doing a lot more stuff on YouTube because I've been recording videos and podcasts and stuff. But it's still linked from my website. I have wrapper pages that for every episode, even though lately, I haven't updated my website as much. But I think my website is the articles and the content. It's just having a platform to put something on. It’s this very IndieWeb thing. It's funny because I've read a lot of the IndieWeb stuff recently. Again, it's showing how old I am. Because for me growing up, that was the web. All those things they're talking about that they want to bring back… that was what I had and I still have. I think it's just this idea of having your own space to express yourself and to share. For me, that ownership is important. And the idea about sustainability, I guess it's a different way sustaining, but like literally sustaining this page for 20 or whatever years is only possible because I own the data. All the all these pages are literally sitting somewhere on my hard drive or my backup, my cloud backups with a bunch of pictures. And for my old pages, if I wanted to, I could reconstruct most of them because they're all static. I never thought about this, but it's true that if your old pages were some PHP or some dynamically generated thing or something that was hosted on a hosted managed service, it's actually pretty hard to reconstruct an old page. I mean, you could take static snapshots, you could do print to PDF, you can turn a screenshot, but you can't actually get the real page back. But for me, I can actually get the real page from many years because it is just straight up HTML. Web browsers are pretty good about preserving backwards compatibility. So for me, I have this outlet where I know I have a place to put something if I want to put something online. And it's this power of giving someone a link and having people see it. I just take it for granted because it just seems so natural to me but it's something that's that's clearly a powerful thing. Laurel 27:18 And then kind of like a side question… I'm curious what what is your hosting provider? You said it's just like a really simple generic one? Philip 27:26 Yes, I use this thing called Web Faction. It’s a service and it's been really good for about 10 years. I got this because somebody I was tutoring a long time ago used it for some reason, I don't know, maybe heard about our from friends or from tech friends, but it's is pretty good. It's like $10 a month or less. Most importantly for me, it gives you SSH access. So it gives you access to a Linux shell, which is what I need, because I need to run my scripts that will upload the content to the hosting service. So I need command line access. And literally, it's just a folder, your public folder, and whatever you dump in there is just shows up on your web page. So it's pretty nice. Laurel 28:42 Yeah, it's reassuring somehow, to know that people who are in the field are using more simple hosting configurations. It just needs to have SSH access for you and it works. Philip 28:59 Yeah. I mean there's obviously very different kinds of providers, but it's also the menu of options is scary to for someone starting out. So what I recommend people starting out is one of these. You pay and they host everything for you. And if you don't want to code, you can use whatever services are advertised on podcasts. There is a plethora of options, for example we give you a virtual machine essentially, and you have to set up your own web server and make sure it keeps running and the machine doesn't reboot. But yeah, for the one I've used for last 10 years, it's super simple. Laurel 29:41 So I'm wondering, what's a website you'd like to bring back from the dead? Philip 29:45 Oh, wow. That's a that's a good question. I'm trying to think of things from when I was a kid. I think I have the most common answer here would be like something like GeoCities. Like that's the common answer, or other of these sorts of communities in the early web. I never really got that into like GeoCities because I always had my own Internet Service Provider. So I didn't need the hosting. Oh, this is so random, but it would be really cool to see sites from the early web from even before I started my own website, like the mid 90s. There was Internet Archive, obviously, but it's incomplete. And it's some of the links and images are broken. These really early sites would be cool, because I remember before I made my site browsing these early websites that were mostly text. I think I used a text-based web browser a long time ago, right. Not because I was some kind of UNIX wizard… but just because like whatever provider I was on… the web browsers in the mid 90s weren't very fully featured. I think some of these early services that let you browse the web with a text only browser… I remember reading about Magic the Gathering, which was this card game that I started getting into during the early to mid 90s. I remember reading these early fan pages that people made about these games. And I was fascinated by it. It was all text. Those early sites would to be awesome to bring back. I’m sure a ton of them are lost because they probably went down before all the Internet Archive stuff came up. Maybe it's not just one site but just whenever I saw as a kid, I'm sure most of those sites are gone because they didn't live long enough for the archiving infrastructure to be built up. Laurel 32:02 Yeah, I think the Internet Archive wasn't started until like the later 90s. (Edit: It started in 1996.) Philip 32:08 I don't even know when they started, and I'm sure their early days the indexing wasn't that good because it takes time to develop. So I think there are a lot of early sites that have been lost. Yeah, like I don't think they'll ever be able to be recreated. I think we have to invent time travel, or a limited form of time travel where the atoms on those computers can reconstruct themselves in the past or something. Yeah, that that's a shame. It's like lost history. But I think it's the same with a lot of historical things. Like I’m not a not an expert in history, but with any big great civilization and with written history, I'm sure a lot of that early stuff was lost because they were just starting up. And that early stuff is so interesting. That primordial stuff. Laurel 33:10 So if you could describe your own energy in just one word, what would it be? Philip 33:17 Oh, my own energy. Wow, yeah. Oh, wow, this is even harder to HTML energy. Laurel 33:25 If you want to think for a moment, you can… Philip 33:29 Yeah, I'll think out loud. It's actually a very relevant question to the web page stuff because I think we talked about in my podcast… in the last however many years since I started my career as a professor, my homepage has actually been my professional page. It's my professional biography and preview of my publications and my research and blah blah. I wanted that to be the landing page because that's what is expected of professors… because when my colleagues, potential students, or collaborators look, that's what they want to see. So lately I actually put a picture of a dog on there. And it says “under construction” because I've started this switch around to go back to my roots. My homepage should be myself and shouldn't just be about work. I've started this evolution. I guess it's not one word, but I would say “under construction”. That's what's currently on my homepage. It literally says under construction as a throwback to the old days. And as I am currently in this transitionary state, where I want my homepage to actually have that energy of the old days, and not be a resume, essentially. Laurel 34:43 Yeah. Do you think it could play both roles? Philip 34:46 I think it is hard for one page to play both roles. I think it's possible, but I think that it's like serving two masters. With my own personality, I tend to do one thing or the other rather than trying to balance both in one in one page… Laurel 35:06 So who's that dog (on your homepage)? Philip 35:09 Yes, my new homepage is a dog. That's one of my friends dog’s from childhood. That photo is a black and white photo taken with a film camera. It was a manual film camera that was for a photography class that I had in my first year of high school. And that was one of my favorite pictures from the class. And this makes me sound really old, but we actually did black and white film and had a darkroom in the school that we actually developed the film and printed the film. It was awesome. Speaking about doing stuff by hand, getting that experience of actually having to take the pictures with the manual cameras and putting the film and spooling the film, then you have to take it out of the dark right and put in these canisters and you like put all these chemicals… yeah, we did it and the end result was you get a print out of this 8 x 10 photo. Laurel 36:12 That’s a great story. Cool, thank you so much. I think that's all really good and I'm going to stop recording… [~2 minute musical outro composed by Madalyn Merkey] *** This was first transcribed by https://otter.ai and later edited quickly by HTML Energy.