435: Magic, iPad Sidecar, Getting Unstuck, Image Compression, and The Website
Chris is nostalgic for Magic the Gathering, Dave's wishing he hadn't added drawings to his blog, they're both mouthblogging about image compression and AVIF, and Jeremey Keith is back with chapter 3: The Website.
Guests
Chris Coyier and Dave Rupert
Time Jump Links
Transcript
[Banjo music]
MANTRA: Just Build Websites!
Dave Rupert: [Vampire voice] Hey there, Shop-o-maniacs. Welcome to another episode of the spook-talk-show. [Evil laughter] I am Dave--a Dracula--Rupert and with me is Chris--a Frankenstein--Coyier. [Evil Laughter]
Chris Coyier: I can only visually do Frankenstein. Sorry.
Dave: Yeah, his voice is really just grumbles.
Chris: [Grumbling]
Dave: Bad for radio. [Laughter]
Chris: Yeah.
Dave: Bad for radio.
Chris: Yeah.
Dave: Oh, well.
Chris: Did you know that his name wasn't really Frankenstein, Dave? It's really Frankenstein's monster. Frankenstein was the doctor/scientist/mad guy that made Frankenstein. [Loud gasp]
Dave: What?!
Chris: (indiscernible)
Dave: Oh, my gosh. That reminds me of a story. Do you know Albert Einstein? Do you?
Chris: Well, yeah, he chewed gum. I don't know.
Dave: Invented science.
Chris: He did lots of posters of himself.
Dave: Yeah. [Laughter] Big into posters. He actually had a brother who was a little bit cooky, like not as well-known scientist. He did some experiments and he did these experiments where he would go to graveyards, dig up bodies, and stitch them together and shoot them with electricity. That is the story of Frank Einstein.
Chris: [Laughter]
Dave: [Laughter] That was good, huh? Didn't see it coming, huh?
Chris: I didn't see it coming. That one hits you - hits you like a bolt of electricity there. You know what I'm saying?
Dave: Yeah. Yeah.
Chris: Really good like that.
Dave: Turns my hair white. Hey - what's happening?
Chris: Well, I remember -- I don't remember your history with this, but I remember playing, back hundreds of years ago, five years ago, Magic the Gathering in Austin. You'd hang out and play with us, right?
Dave: That's right. We played. We played a bit. You went to the comic shop or whatever and bought a whole box of Magic cards.
Chris: Oh, that sounds like me. Yeah.
Dave: You were like, "This is the easiest way to play it." Well, of course, you're not going to carry a big old deck around the country or whatever, but.
Chris: Well, I think that's -- we're talking about the nerdy card game. My wife hates it when I say the word "nerd" because it's kind of meaningless, but you know what I mean.
Dave: A fantasy card game.
Chris: It's warriors and elves and it has a whole lure to itself. You play it with physical cards, although it does appeal to me to play it digitally these days because it looks like the apps for that have gotten really good. But of course, I prefer the paper thing just because it's so fun. I have a history with it. I played it as a kid and I thought it was amazing. I loved the game. It was like a big part of my life for a long time only to find out, years later, much like the MUD that I play now, Magic is thriving. The way that you play it these days feels so fair.
One of the ways you can play Magic the Gathering is like a draft where everybody cracks open these packs of cards and there are different types of drafts, but this is the one I like where you crack open the packs and you assemble decks based on what you get. Somebody's lifetime of collecting Magic cards doesn't give them any advantage. It's a skill only.
Dave: Mm-hmm. Mm-hmm.
Chris: Then even a really beginner player, as long as they grasp the rules pretty effectively, might luck out and get a sweet deck or whatever. That was the kind of style we played because I think it's so inclusive, right? You can just pop down Friday night Magic. Play the stuff, you know?
Dave: That's my preferred, to be honest. There are games like Hearthstone from Blizzard and stuff like that that I've played, but I don't like the deck-building.
Chris: Hmm.
Dave: Like, "I have collected these cards over 72 years and they're the most powerful cards and I will destroy." You know? That aspect was less fun to me.
Chris: Yeah.
Dave: But your style of, like, let's just open some cards, shuffle it, and divvy it out, that's cool.
Chris: Yeah. I think, long-term, you kind of have to get into some element of deck building just because that's where the strategy of it leads you towards.
Dave: Sure. Sure.
Chris: Like, oh, I had too many lands. I need to adjust the ratio. The spirit of Magic is turns and you get more powerful as the turns progress, so you need some kind of like curve of cards in your deck that are low power, easy to cast, and high power, harder to cast, and yadda-yadda. You know?
Dave: Yeah. Yeah, I could see it from that's the spirit of the game. But from a pickup game aspect, I like the--
Chris: Oh, way better. I can't wait. I just bought a box last week. I went to the store and bought a core 2021 set. Just in case somebody came over and wanted to play Magic, I'd be ready. I have multiple drawers full.
Okay, so this is what it's kind of leading me towards is, as I get older, I find myself rollercoastering back to old hobbies over and over. At least I found this to be true of myself. I'll have a little wave of nostalgia and I'll re-get into something that I was into before and just explore it a little while and then drop it again, eventually. This has happened to me with Magic like four times in my life, I'd say. You know?
Dave: Mm-hmm.
Chris: At one point, I had a bunch of cool cards as a kid. Then probably at some point got rid of all of them. Then got into it again and starting collecting some cards again. I think, in my second, third wave or so, I was an adult and thus had money and wasn't married and didn't have kids and probably had too much money for my own good.
Dave: Oh, well.
Chris: At one point, I start buying up cards almost as collectibles. Like, oh, as a kid, I could never afford these amazing cards, so I'm going to buy them now as an adult just to have them, just to feel cool. You know?
Dave: Yeah.
Chris: I think the most famous card of all in Magic was the Black Lotus. It was just this really -- you know, we talked about mana and stuff. It was a zero to cast card that you could tap. It would destroy itself, I think, and give you three mana, a colored mana, which is exceptionally useful of any color you wanted. It was never replicated.
The reason it's too powerful is you're like, on round one, if you get it in your hand, you're casting a level four card on the first round.
Dave: Yeah.
Chris: You're going to crush. It's way too unbalanced. You know?
Dave: Yeah.
Chris: But it was a beautiful looking card and, whatever it meant to the game, it was iconic, so I bought one seven years ago, 2012, eight years ago. I just bought one and I paid too much money for it back then, but then I just threw it in storage and, just, I don't care. I didn't even frame it or anything. It's just sitting there.
Dave: [Laughter]
Chris: I knew I had it. Once in a while, it would come up in conversation like, "Oh, I've got a Black Lotus sitting around here somewhere." It was almost like wine storage or something. It only got more valuable over time. Now I feel like this financial genius for keeping it around.
I tweeted the other day, because I finally dug it out the other day. I took a picture on Twitter and started trolling people with it only to have people DMing me like crazy, like, "You know what that's worth, right?"
Then all the way across the moral spectrum, like, you know you have a moral responsibility to give this to your local card shop because you don't even know what it is and that will save them from extinction kind of thing. I'm like, "Dude. Okay." You know?
Dave: [Laughter] You bad person.
Chris: Yeah. [Laughter]
Dave: In some ways, you're like, "I already gave a sizable chunk of change to support the local card shop."
Chris: Yeah. How about a lifetime of doing that? Anyway, but, [laughter] I sold it, Dave.
Dave: You sold the Black Lotus, huh?
Chris: Got a decent offer on it and I was like, you know what? This is probably the best investment story of my life. I didn't buy Apple stock 20 years ago but I did buy a Black Lotus and it turned out to be kind of worth it.
Dave: Wow! Wow! I'm sorry you had to part with your treasure, but it was also just sitting in a drawer for the last eight years.
Chris: It sure was. You know what I did? I put it in a special account that I never touch because I'm going to take the money that I got from it and buy something cool with it just so the story arch can be complete. You know?
Dave: Mm-hmm.
Chris: I can be like, I bought it. It made this money. It made X money and I spent all of it on this. You know? Maybe it'll be like a giant stuffed buffalo or something, something weird to be like--
Dave: Okay.
Chris: Just to complete the story arch.
Dave: You just have the -- yeah, you have a -- whatever -- a ten-foot-tall orc statue in your front yard.
Chris: [Laughter] Yeah, why not?
Dave: That's the full circle there. That's cool. I don't have anything that wonderful, I think. [Laughter] Yeah, I'm trying to -- all my treasures, I'm more like, I bought a banjo. I want a different banjo and I don't want two banjos.
Chris: Oh.
Dave: Do you want this banjo? [Laughter] I err on the side of giving things away, even to a friend of mine. I have this iPad Pro. I'm like, mixed reviews on the iPad Pro, you know.
Chris: Mm-hmm.
Dave: Then my friend was like, "Oh, I want an iPad Pro." I was like, "Ooh, I guess you could have mine." But then I'm like, "Wait. Maybe I use this because I do use it for RSS and stuff like that."
Chris: Yeah. Yeah. I just signed a PDF with it, so there you go. A very important PDF signer.
Chris: I have one, too. I have mixed reviews, too. I've bought them over the years and then never use them. You know?
Dave: Mm-hmm.
Chris: I have a laptop and a phone, and that usually covers the ground and so why do I need this iPad? Then my wife has a good one and I'm like, "I want one. That's nice."
Dave: Yeah.
Chris: You know? [Laughter]
Dave: Yeah.
Chris: I bought one recently out of just -- I don't know. I feel a little guilty even saying it. It's silly to be able to throw around money like that. It's not like we have all this deep savings. I should probably have put it into long-term savings because, I'll tell you what, we are not rich in that regard. But, anyway, I bought one.
Dave: A chip off the house payment or a little couch time with the iPad. [Laughter]
Chris: Something that all evidence proves that I don't need.
Dave: Yeah.
Chris: But I like this one because it has Sidecar, which is that function that makes it a little monitor if you want.
Dave: A monitor.
Chris: I have gotten rid of my second monitor and now my wife uses that one. Just Sidecar, just when I feel like it, like if I'm going to be at a conference and I want a little extra space to put Slack over there or something.
Dave: That's cool. I don't have that ability here on the Windows, unfortunately, but I hear it's cool. If you were in a Zoom call, could you share the Sidecar? Does it work like that?
Chris: Yes.
Dave: Really? Okay, because I've been thinking about, like, I want a dedicated -- I have a full gaming monitor.
Chris: Yeah, it's huge.
Dave: Talk about things I spent too much money on, I have the 34-inch ultrawide.
Chris: Woo-hoo!
Dave: And I have a 25-inch, 240-hertz gaming display.
Chris: Oh, it's smaller, but it's way better?
Dave: It's smaller, but it zooms very fast and I can win at teenagers in Call of Duty.
[Laughter]
Dave: That's my goal in life. I have this, but I actually feel like I have back problems from looking at two monitors and stuff like that. I think we talk about--
Chris: I know your theory. Yeah. I'm obsessed with it.
Dave: We've talked about back pain quite a bit, and my friend John is an actual ergonomist and stuff like that. That's what he went to school for. He was like, "Oh, yeah. That's bad." I just was like, "Dang it, John! You should have told me."
I almost want like a hidden monitor and maybe the Sidecar thing is it. But a monitor I can share on Zoom calls and it's an approximately good resolution to share. You know? Because if I share the ultrawide display on a Zoom call, people are just going to get mad at me because it's 80 miles wide.
Chris: Oh, I know what you mean. Yeah, so you have to either share a window or--
Dave: Share a window, but then that gets clumsy because I'm always talking about code with a code editor and a browser. I've found that the second display that's a 16x9, a 1080p display is perfect because I just know that screen is live when I share.
Chris: Mm-hmm.
Dave: So, I could have my taxes up on the ultrawide and I'm just sharing the 16x9.
Chris: Why can't you draw a rectangle? There are all these apps to draw a rectangle and record only that. You'd think that'd be a nice feature for these.
Dave: Or just a virtual display. Wouldn't that be cool? Just an entirely software display, which is maybe what the Sidecar is, basically. This is the idea of a display. It's not even real.
Chris: Yeah.
Dave: It's like a virtual machine.
Chris: Yeah. I'm surprised at how well it works. It attaches like any other monitor. You drag stuff onto it. You drag stuff off of it. It behaves very, very identically like another monitor.
Dave: Is it USB to do the Sidecar? You use USB?
Chris: No, it's wireless.
Dave: Wireless. Okay.
Chris: Which is nice, but I always have it plugged in anyway because it's sitting at my desk, so you might as well plug it in. But it doesn't need that. You unplug it and it's almost like you wish it was USB because sometimes I'll unplug it assuming that that cancels it, but it doesn't. I'll even unplug everything, both my iPad and my laptop, but them in my backpack, go home, crack open my laptop on the couch at some point and it's still connected to my iPad in my backpack as the second display. I'm like, "Oh, no. Stop. I don't want that right now." You know? I've left my previous context. It's weird that you're hanging onto that second display four hours later.
Dave: Oh, yeah. You've went home and it's still a display. [Laughter]
Chris: Yeah.
Dave: You're like, "Eh, hey, buddy. You can stop that now." I think people say you can get it running on Windows, but you have to download whatever software in a foreign language, and that gives me the big nos. So, anyway, we'll see.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by AWS Amplify. Oh, so cool. Glad to have them as a sponsor.
You know AWS itself has all kinds of stuff to run websites. It has all kinds of storage things and hosting things, and it has auth and databases and S3 buckets - just all kinds of offerings. AWS is kind of like a collection of those to help you build websites.
Maybe one of the ways you can think about it is, it's like the CLI. You add the CLI, meaning that now on your command line you can type stuff and do stuff. It helps you scaffold out the things that you need. For example, if you need storage, you can type "amplify add storage" and, through the CLI, it'll walk you through the choices of how to add that to your project.
Do you need a GraphQL API? Type "amplify add API" and it'll walk you through choices to get it all set up. For example, you want a GraphQL API because you're building an app that needs that. It's not opinionated about what kind of app you're going to build, not in that way. It'll just help you get data storage set up, whatever you're trying to build. It'll use AWS app sync, which is part of this Amplify thing, which is going to get you this real-time data storage through GraphQL that's really, really cool.
It helps sometimes to have someone hold your hand a little bit and figure out how to configure all that stuff. If you want to add auth, well, Amazon Cognito is the thing that does auth, but how do you get it into your app? Well, Amplify will help you do that through its CLI tool.
Now, a big part of this is the AWS Amplify console, which it's also your hosting. It also can help you be part of the JAMstack approach to building a website, meaning that you can deploy from the command line as well out to static Web hosting, you know, CDN-backed, super-fast Web hosting, and then do the rest of your services JAMstack style on top of that - nice.
It connects to Git repos too. That's part of this expectation that we're starting to have as developers is, I want to work in feature branches. But when I push to main or master or some branch that we've decided as our main deployment branch that that's kind of a protected branch. When that happens, CICD runs. Amplify has CICD built into it. It's really full-featured. It has all the stuff that you expect for DX. It's a pretty nice thing, overall, so check it out.
[Banjo music stops]
Chris: Well, we talked about a lot of stuff there. I'm interested in your blogging post that was like this morning, maybe, or last night or something.
Dave: Yeah. Yeah, so I made a blogging mistake, Chris. I did the blog mistake. You know what that is? I was hitting a blog streak, feeling good. I think you said it on the show and jinxed me.
Chris: [Laughter] Aw. Sorry.
Dave: But anyway -- well, hey, it happened. Jinxes are real. And so, I had got going but then it's actually my fault entirely because I wrote this post and it's really just a post about going to the bookstore.
Chris: Okay.
Dave: Very simple. But I was like, wouldn't it be cool if I had little illustrations of going to a bookstore or whatever? Wouldn't it be cool if I could spice this post up with some illustrations?
Chris: You're not wrong.
Dave: It's a boring post, right? But it would be kind of funner if it had some illustrations, maybe a little more humanism or whatever.
Chris: Mm-hmm.
Dave: So, I started drawing, and I was like, oh, well, I'm going to have to draw. Now I have to go find a drawing app. Okay, what's the best drawing app? I guess we'll just use Procreate. Okay, now when I export from Procreate, it only gives me a PNG and that'll go to my blog, but then, uh, you know, like dark mode and vector. Wouldn't vector be better? Vector should be better, right? I want a vector.
Okay, so maybe let's see the SVG apps. Oh, all the SVG apps are just -- ugh, man. They're all terrible. It's all just path tools. It's not great. It's not drawing. It's path tools and I don't want to do that.
Okay, but I have an app. Maybe that prompts app, I can actually export an SVG from prompts.
Chris: Oh, okay.
Dave: Maybe I should just fork that.
Chris: Mm-hmm.
Dave: But the latency might be kind of bad, so maybe I'll have to fork the repo that I'm using. Ugh. I went a thousand miles down this thing and basically quit blogging for two weeks because I was like, I want to add a drawing to my blog and now I quit blogging. I said it was a mistake because it's that thing where you have an idea and you're like, "Yeah, I'm going to do one idea and that'll be cool," but I think I realized I should never block the thing I'm doing with a thing I want to do. Does that make sense? It should always be in tandem. I shouldn't have to build CodePen just to show a code sample on my website. [Laughter] I just should figure out a way to do that cheap and easy or something like that.
I don't know. I just went through my whole -- I just blocked myself and I realize, if I want to start adding drawings to my website, I should probably do a daily drawing habit, build up a hundred drawings, and then figure it out so that I don't have to draw on demand.
Chris: Yeah.
Dave: I'm not great at drawing, but I'm mediocre at best. But I think there's--
Chris: You came to some self-realization there, which I think is nice. Like, okay, it looks like a month based on the dates on your blog.
Dave: Yeah.
Chris: Blogging is not your job, so I think it's okay if you don't blog for a month, Dave. Don't beat yourself up for it. Also, there's also a way where you let the drawing suck. Who cares if it's vector or raster. There's also a middle ground here where you draw a crappy little picture and you just can paste it in there.
Dave: Right. Right.
Chris: If you really wanted that, lower the bar.
Dave: Yeah. In a lot of ways, I was over-complicating it. That's my fault, too. Yeah, I know. I don't know. I should maybe try it again. I think I'll just publish the post or just say that's going out tomorrow and I have tonight to figure out what I'm going to do. [Laughter] You know?
Chris: Mm-hmm. Mm-hmm.
Dave: Just because I was like, you know, I shouldn't block myself that bad on something like that.
Chris: I wonder. Now it makes me think. Now, this is irrelevant to you because you have this static site generator setup, but I'm picturing how good Gutenberg has been to my blogging workflow.
Dave: Mm-hmm.
Chris: I just enjoy crafting posts in it. This is a free idea for you Gutenberg block builder entrepreneurs out there. Make a drawing block.
Dave: Oh, wow!
Chris: If you're writing a block, just make a new block. Have it be this blank white canvas with little drawing controls. Draw right in there with the tools and done, you know. You lift up your pen and the block is done. Oh, that would be cool.
Dave: That's very next level because I have another post. I think we talked about it. We did just a live ShopTalk over at the Smashing Conf. That was awesome, Smashing Conf Austin, virtual Austin.
Chris: We'll probably publish that. I think that post will come out, but I have another post about Sass vars that I wrote, but I was like, ooh, if I had an illustration, even just a crude one, I could kind of explain it, right? It would really tie the room together, man, and I think it would really explain what--
Chris: Heck yeah.
Dave: --my thinking. That's a perfect example where Guttenberg would be awesome. I could just plop a canvas in, you know, and then I'm done. That would be cool.
Chris: Mm-hmm. Mm-hmm. Yeah, Yeah, kind of a fan. Well, thanks for sharing that. I think that's kind of cool. People need to hear that kind of thing sometimes, you know, how people can trip yourself up.
Dave: Yeah, it's all me, right? Or it was just even like I tried to bite off something I wasn't doing. I tried to pair something I wasn't doing with something I was doing and that ended in disaster. I don't know. This was very much a post about myself but after I posted it, I was like, "Hey, does that apply to business, life, and stuff like that, like apps and stuff?" Maybe you need to really understand your core strengths. This is Peter Drucker, I guess, but understand your core strengths and use those and then build up other strengths. But make sure you're operating in your core strengths--
Chris: There you go.
Dave: --while you pursue other things. I think about that in terms of prototypes and all that stuff.
Chris: I redid my site just yesterday.
Dave: You did?
Chris: Yeah.
Dave: Really?! I didn't see it. Sorry. I'm behind on my RSS, Chris Coyier.
Chris: Well, it was a couple hours of fresh paint. It's not a thousand miles different, but I got sad that, in order to see my blog posts, you had to click "blog" in the main menu. I always wanted to have more of a focus on the blog on my personal site because it is one. You know?
Dave: Yeah.
Chris: So, I kind of like moved the bio generator over to one side and kind of have blog posts up there, too. Then I wanted a blog roll because I think blog rolls are awesome, so I just put a bunch of people's names that I like at the bottom.
Dave: Nice.
Chris: Put linked to their blogs.
Dave: I like it. It's fun. You've got a little spiny header there.
Chris: Yeah.
Dave: [Laughter] A little spiny header.
Chris: [Laughter] Yeah, that's ztext.js.
Dave: Oh, okay.
Chris: Bennett Feely's project. It's pretty fun. It's fun. It's colorful. It's in the spirit of what I had before but kind of solves -- I don't know. It just feels a little bit more like what I wanted out of a personal site.
Dave: Yeah, your previous was kind of more like Chris Coyier the speaker or something, like the author because it had a big you with a banjo on it.
Chris: Yeah. It was kind of looking up at the post.
Dave: This is more--
Chris: I liked that. I got compliments on it but it was -- I don't know if I need -- you get a little sick of looking at yourself on your own site a little bit, so I was like, "You know what? I have a photo section. You can get it from there if you want to look at me," because I think that's important.
This site actually does solve some problems for me. Nobody ever asks me for a bio. It's right here. It's exactly what I want to say. People copy and paste it all the time. That actually is highly functional, the bio thing.
Dave: You know I do that. Conferences or whoever will ask me for a bio and I'm just like, I'll just copy/paste my bio. I think this is great, too, because you could almost even give them the photo too. Yeah, you have need photo too, so that's the best way. You know what I mean?
Chris: Yeah. Pick whatever you want. It's all yours.
Dave: Take this stuff.
Chris: It solves me literal a bunch of times, you know. Then I always thought it's nice to, on a personal site, be like -- I have this section called "Do these things" because I'm like, I do have some asks of the world. My job, not abstractly, is to get you to sign up for CodePen Pro or a team or something.
Dave: Right.
Chris: I'm just going to tell you to do that. It's a little tongue and cheek because, of course, you don't have to do that but it's kind of like that is my ask of the world. I want you to buy some merch, buy my book, subscribe to this podcast, write me a guest post. I have things I'm asking of the world. Rather than be obtuse about it, I'm just going to ask you.
Dave: No. See, that goes back to the sell a thing for $10.
Chris: Yeah.
Dave: Hey, whatever, here's how you can give me money. [Laughter] This is wonderful. This makes me -- this is how I operate.
Chris: I'm happy with how it turned out, so that's been cool. Let's see. We're going to have Jeremy come on and do the third part of the Web history series in this because I think it's worth publishing. I listened to -- I've completed listening to them all, even in the context of this show. I had some time in the car and I just wanted to listen to Jeremy do it. He does just such a great job, so that's going to be cool.
We have a few minutes left in the show, too. Let's do a couple of questions and then pass it to Jeremy, huh?
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Framer. Literally, framer.com/shoptalk, go there to sign up for free or to get 20% off if you go for any of their paid plans, which is super cool. Thanks, Framer.
Good design work, it should clearly communicate a message. The same is true for you, a designer. You should be clearly communicating a message. To whom? To the people you need to sign off on your design: your manager, your client, your CEO. Why are you still presenting flat, lifeless product ideas? Put an interactive prototype into the hands of those people and watch their eyes light up. They'll buy into your vision. It's much more convincing to present an interactive prototype. Framer is your secret weapon.
Start from scratch or import work from another design tool. Drag and drop. Build these powerful, interactive components. Set up transitions, animations, which is almost expected these days that your app has when it's moving from one page to the next or in one state to another state that it has transitions to get you there. Create your own stunning animations, all visually. It's a Web app, you know, beautiful for it.
Rich, realistic prototyping just became intuitive in Framer. Just take it from Bruno, a product designer at Shutterstock. "Framer is an extraordinary resource for rapid prototyping. It has improved our team collaboration by providing an easy way to share the designs between engineers and project managers. Its built-in tools have been essential for quick prototyping and user testing." Oh, how awesome is that?
Again, that's framer.com/shoptalk where you can sign up for free or get 20% off any of their paid plans.
[Banjo music stops]
Dave: All right. We got a Code Hardson. Hopefully, that's your real name.
Chris: Code Hard Son.
Dave: "Can you guys mouth blog responsive images, please? I'm still stuck in the old days of media queries and now my boss is using Google page speed insights to benchmark website performance. Google page speed insights asks for next-gen image formats like WebP and blah-blah-blah. So, I go into picture source elements, but it seems like just IMG with tags and sizes attributes would do the trick."
Chris: Um, maybe. Not really. Not if you need to -- if your goal is to use the responsive images format, e.g. the picture element, not image source set but the picture element is the only one that's capable of fall back formats.
Dave: Mm-hmm.
Chris: If you're like you have a JPEG but you'd like to serve it in WebP when WebP is available, you have to use picture.
Dave: Yes.
Chris: I say you have to use picture syntax wise. If you're trying to impress your boss and pass the Google Lighthouse score, blah-blah-blah, and the only tool you have available is that you can make both formats and ship them with picture, then so be it. Do it.
My somewhat strong opinion on this is that you're not going to do it. It's going to be hard to maintain. Having to manually produce both image formats suck. It's just not a good -- I'm very glad that HTML offers this as an ability thing that it can do, but it's not a good, long-term solution and there are so many services out there that handle this problem for you. I think Cloudinary was one of the first out of the gate to do it. Imgix can do it. My images hosted on the WordPress cloud can do it. CodePen, our image hosting, it can do it.
But what I mean by "it" is it just knows if the browser that it's serving to can support WebP or not and it just does that. It's pretty simple. In fact, we just had to update the code on it on the CodePen side. We do it through a Cloudflare worker. There's a thing called an accepts header.
Dave: Mm-hmm. Yeah.
Chris: You can literally look at the header, and for WebP, it's 100% right. Browsers that support WebP send it and it sends this string. It's a little bit like -- I don't know what you call the user agent string, but it's different. All browsers do it differently, but if it supports WebP, the file type thing, like image/webp, will be in it. You can kind of do a string contains check. If that's in there, that browser accepts and can render WebP. Thus, you should send it.
Now, you probably won't need to deal with that on your side. But if you use any number of different image hosting services for those images instead, boom, you got WebP when you need it and JPEG or whatever fallback when you don't. That's awesome and it means you don't even have to go down the picture, the HTML picture. You just put image source and it just works.
I think that's maintainable. That's realistic. By virtue of you doing that, those images are probably on a CDN, too, which is a good idea. You're going to get more mileage out of sending an image in WebP instead of whatever other format than you will for all of responsive images - pretty much. There's more gain to be had in serving it in the right format than there is in sending a 1200 pixel instead of 1400 pixel or something. It's a big deal, this right format.
Now, responsive images, usually you think about that: send big images, send medium size images, send small images. That cannot be automated away in the same way. You still need to use source set for that.
Dave: Yeah. Yeah. Like the mime type, the type of image, definitely use server stuff if you can. You can manually cut your WebPs and stuff like that. I've done that before and then you hard code it into a picture element. You have a source for WebP and a source for JPEG or whatever.
Chris: Yep.
Dave: That'll get you out of the next-gen image format. But then very quickly you're going to need different sizes, which Chris is saying. This is where, in the whole picture element, responsive images thing, the image element got two new attributes: sizes and source set, SCR set. SCR set is like whatever small.jpeg 480w. That's comma large.jpeg 800w. That's like at 800 pixels wide, whatever CSS thinks that is based on the device resolution, blah-blah-blah, use the small one. Then at this one, use the big one.
Chris: Yep.
Dave: Then there are sizes, which is very similar. It's like you put a baby media query in there and then you say how big you want the image to basically be, like max width 600 pixs, 480 pixs, or something.
Chris: Yeah, but it's not telling you -- it's just like informing the browser, "This is what I plan to render that image at, so I'm just giving you a heads up on that because I want you to use that in your calculations to figure out what I need." If you don't give them anything at all, it's just going to assume that that image is going to be rendered basically edge-to-edge of your browser window.
Dave: Mm-hmm.
Chris: Which is probably not true. Your layout has more nuance in sizing to that.
Dave: Inside the source set, you can also just do whatever, small.jpeg, small.jpeg 1.5x small.jpeg 2x. I think we got new iPhones this week that are 26x or something. [Laughter]
Chris: Oh, my god.
Dave: What is it? Crushed sapphire retina displays or some ridiculous branding term. I should know it, but yeah. You can also just do the 1x, 2x stuff. To be honest, I don't do the sizes stuff at all. I don't do anything fancy. The 480w, I probably should. But really, I usually just do either a picture element for the mime type of I use picture element to swap the aspect ratio. I'll do a 16x9 on desktop and a 4x3 on mobile because image hierarchy gets weird when you squish down.
Chris: Oh, interesting. Now that's cool. Source set alone cannot do that. In this case, you need picture because you're changing the aspect ratio of the image.
Dave: It's a different image.
Chris: Yeah.
Dave: But the heart of it is I want to preserve some kind of hierarchy, so I do that a lot. But then I need to start doing the 1x, 2x, 3x thing, but I'm bad at it. Sometimes, you just wish it was automated and there are some services now that automate it. A lot of big brains went into the picture element but it got very complex.
Chris: It's meant to be automated, in my mind. It's meant to -- I really like how, for example, WordPress does it. You just drag your fricken' image on there and it calculates it. It makes all the markup for you. It does all the magic.
Dave: Yep.
Chris: Including leveraging cloud services when it can, so I think that's pretty sweet. Yeah, you can handwrite it, especially if you just have one landing page and you're trying to crush it on your Google page speed score. You can absolutely do that.
Now, there's another wrench that's been thrown in this recently. You can ignore it. It's like, whatever; you can get a lot of mileage out of just what we've described so far. If WebP, then use WebP.
Dave: Mm-hmm.
Chris: We got a little into that. It just so happened that WebP was just always better. But now there's another format that is just dropping. I think it's in the … it's now called AVIF, which is even better than WebP, but not always. So, that's the tricky part is it can be this great format, but now you need to start using your brain a little bit more and being a little bit like, "Hmm. I did an AVIF conversion. Is it smaller? Does it look good?" If it is, then serve it. Then fall back to WebP. Then fall back to JPEG.
Dave: Yeah, well, that was interesting because Jake Archibald has a post, "AVIF Has Landed," where he uses this F1 shot and the original is something ginormous, like two megs or something. The JPEG is 74 kb, the WebP is 43 kb, and the AVIF is 18 kb.
Chris: Super nice.
Dave: It's a quarter of the JPEG and it looks just the same. Well, it actually looks clearer than the JPEG. If I'm completely honest, it looks better than the JPEG from my eyes. But it maybe tweaks reds a little bit or something, you know how these image algorithms work.
What's really interesting is, just following that discussion, people are like, "No way, Jake! I'm not going to do this until a computer tells me it looks better." [Laughter] I was looped in on threads and I just was like, I don't need a computer to tell me this looks better and is smaller. I can see that. It looks great. It looks decent and it's a thousand miles smaller.
Chris: And the tools are here to use it now because, in the past, when a browser didn't support a technology, you had to just throw your arms up and say, "We're not ready for that." This technology is absolutely already arrived before the format of how to take advantage of it in a progressive enhancement way that says, "If supported, then use this. If not supported, do that," and there's no downside other than a handful of characters of HTML.
Dave: Yeah.
Chris: It's not going to download anything unnecessarily. It's a really nice setup. I am maybe in slight disagreement in that I do like the idea that automated services can handle this for you.
I notice Cloudinary--I just mentioned them because I use them for various things--doesn't have it yet. They have what I consider a really nice format where you can link to an image on Cloudinary and say, "F auto Q auto," which means format auto, which means just pick the right format for the right situation, no matter what, and then Q auto, which is like, adjust the quality for me magically. I don't even know what goes into it, but that's the sauce. That's why you pay for it.
Dave: Mm-hmm.
Chris: That's because they have advanced technology. I would like to think that at some point it's going to start, automatically, any image that I've ever linked to on Cloudinary, because I use F auto, Q auto, is going to start serving AVIF at some point. Now, they haven't said that I don't think. But they'd be silly not to. That's the whole business that they're in. I like the idea that when you opt into fancy technology that it evolves for you.
Dave: Well, and that saves Cloudinary money because they have bandwidth bills. You know what I mean? If they can send an 18-kilobyte JPEG versus a 74-kilobyte JPEG or 18-kilobyte AVIF--
Chris: Yeah. Literal money savings.
Dave: Yeah, that's a quarter of the cost. That's--
Chris: I think the problem, though, is then again they haven't said this but to make these images is beefy. I can feel it because I can see our servers chug it. For example, on CodePen, we'll serve you AVIF too, if you want it.
Dave: Okay.
Chris: If you then upload a JPEG and then append to our image hosting a URL parameter, a format AVIF, it will serve an AVIF, but you can feel it chug the first time it does it.
Dave: (Indiscernible)
Chris: You can feel it be really slow.
Dave: Having a tough time.
Chris: Then it's fine because it's got it and it's cached and it's global. But I think the computational power to create one of these things is high. I have a feeling that that's probably why some cloud services haven't rolled it out yet is because they're like, "Yeah, sure, it's cheaper once we've got it but making it is costing us computation time and it's not financially advantageous yet."
Dave: Mm-hmm. No, I could see that. I could see that, for sure, because it's -- well, you know, we didn't even talk about this in the image format stuff, but I think a lot about progressive scan, progressive JPEGs and other image formats.
Chris: Mm-hmm.
Dave: Where you can load a little bit and it'll try to paint the thing. Then it'll come through and scan in new layers of the image and make it give it more fidelity.
Chris: Right.
Dave: That's an image format feature and I think it's really cool that you can basically get part of an image. People can see an image with no request, none of this blog or blurred out image hack trick stuff. You just request this. The first response is a blurred out image from a JPEG, like a progressive JPEG.
Chris: It is progressive that that's one? Yeah.
Dave: Yeah.
Chris: There's one that's do line by line and there's one that's do blurry and up from that. I think that's really cool and technology has even evolved from there. I think there's some image format that's sitting around that requires server technology to go with it, but it's one image format that can serve any quality, so it's kind of like you request it from the server, and then at some point, the server can intelligently say, "Stop requesting me. I know I'm a 500-kilobyte file, but just stop at 82 kilobytes because you've got all that you need."
Dave: Yeah.
Chris: There are font formats that are like that too. Request what you need. I'm a big file but the server can say, "Stop streaming me. You've got everything that you need." Just like how video works. You don't download the entire 100-megabyte video file. It starts coming down in small pieces and can be stopped at any time. The browser and client can talk back and forth about what it needs from that. That technology can make its way to images and I can't wait. That's so clever. Rather than having to cut and store individual fricken' image files and 17 versions of it, I would think, half a decade from now, there's going to be one image format that just can do it all.
Dave: No, and I think the -- what is this -- JPEG XR is kind of on the roadmap for people. I think that's something you could do. I think it's not quite in every browser, but I think it's something that people are trying to get and that could change the landscape again. We could have another shift even after AVIF. Yeah, I don't know.
Chris: Certainly, there's going to keep being shifts. I mean if there's one thing you know about tech, it just keeps changing.
Dave: Yeah, I didn't need a new image format but, hey, I got one and whatever. We'll deal with it.
[Laughter]
Dave: all right. Let's do--
Chris: Sure. Let's just be done, probably, yeah?
Dave: Let's be done. Here, I was going to do a little test. Is that okay?
Chris: Yeah.
Dave: AVIF, the little dude on my homepage, from a PNG.
Chris: How are you going to do it?
Dave: I was going to use Squoosh app, but it doesn't -- oh, here it is. Here. I'm in Squoosh. All right. Oh. Oh, okay. All right. It's doing nothing, like max quality 30%, effort two. Let's jack up the effort all the way, buddy. Let's just effort, effort, effort. Okay? [Laughter] Now it's chugging. I broke the computer.
Squoosh app, by the way, squoosh.app is built by Chrome devs, but it's like my favorite image editor just to see what happens to an image when you do some stuff to it. I'm going to have to half the compression because I broke it. [Laughter]
Chris: Yeah. What's interesting is AVIF can do lost lists or it can have adjustment quality, and I think it can do animation and stuff. It doesn't do vector but somehow its algorithm handles it a little nicer. It's pretty impressive stuff.
Dave: It keeps colors. It keeps texture. I did everything and it's like 51% smaller, so if I roll this out today, 53% smaller with 7 efforts, you know, I could get this out today and people would have my hero image 100 times faster. That would be awesome, right?
Chris: Yeah. Sometimes I'm -- on my Mac, I'll … four and take a screenshot of something. I just did that of our two faces here on this Zoom call.
Dave: Mm-hmm.
Chris: It doesn't care about file size at all because it just doesn't care. It makes a PNG file. It was about a megabyte big. Throw it on Squoosh, 41 kilobytes, 96% smaller, lossless.
Dave: Yeah.
Chris: It's crazy good.
Dave: I'm doing 25% quality and I'm getting -- oh, man. This is amazing. Anyway, cool tech.
Chris: Here's the thing, though. If you have a JPEG that you've already compressed down, then you throw it through AVIF, it'll be bigger. AVIF does exactly the opposite of what it's supposed to do. It makes the file size larger than what you had, so you have to be careful. This is not just an auto-win thing. That's what I'm trying to tell the world. This is my message that WebP was pretty much an automate win.
Dave: Mm-hmm.
Chris: If WebP then better. It's just not always the case with AVIF. You have to be careful.
Dave: You have to be careful. Cool. On that, we should switch over to Jeremy. I think today he's talking about The Website. Low and behold, very exciting.
[Banjo music plays]
Jeremy Keith: The very first website was about the Web. That kind of thing is not all that unusual. The first email sent to another person was about email. As technology progresses, we may have lost a bit of theatrics. The first telegraph, for instance, read "WHAT HATH GOD WROUGHT." However, in most cases, telecommunication firsts follow this meta template.
Anyway, the first website was instructive for a reason. If you were a brand new Web user, it's the first thing you would see. If that page didn't manage to convince you the Web was worth sinking a bit of time into, then that was the end of the story. You'd go and check out Gopher instead. So, as a starting point for new Web users, the first website was critical.
The URL was info.cern.ch. Its existence on the CERN server should be of no surprise. The first website was created by the Web's inventor, Tim Berners-Lee, while he was still working there.
It was a simple page. A list of headers and links to download Web browser code, find out more about the Web, and get all of the technical details. It was divided only by short descriptions of each section. One link brought you to a list of websites. Berners-Lee collected a list of links that were sent to him or plucked them from mailing lists whenever he found them. Every time he found a link, he added it to the CERN website, loosely organized by category. It was a short list. In July of 1993, there were still only about 130 websites in the world.
A few years back, some enterprising folks took it upon themselves to re-create the first website at CERN. So, you can go and browse it now, just as it was then.
As far as websites go, it was nothing spectacular. The language was plain enough, though a bit technical. The instructions were clear, as long as you had some background in programming or computers. The Web before the Web was difficult to explain. The primary goal of the website was to prompt a bit of exploration from those who visited it. By that measure, it was successful.
But Berners-Lee never meant for the CERN website to be the most important page on the Web. It was just there to serve as an example for others to recreate in their own image.
Tim Berners-Lee also created the first browser. It gave users the ability to both read -- and crucially, to publish -- websites. In his conception, each consumer of the Web would have their own personal homepage. The homepage could be anything.
For most people, he thought, it would likely be a private place to store personal bookmarks or jot down notes. Others might choose to publish their site for the public, using it as an opportunity to introduce themselves or explore some passion, similar to what services like GeoCities would offer later. Berners-Lee imagined that when you opened your browser, any browser, your own homepage would be the first thing that you saw.
By the time other browsers hit the market, the publishing capabilities faded away. People were left to simply surf, and not to author, the Web. For the earliest of Web users, the CERN website remained a popular destination. With usage still growing, it was the best place to find a concise list of websites. But if the Web was going to succeed, truly succeed, it was going to have to be more than links. The Web was going to need to find its utility.
Fortunately, Berners-Lee had created the URL. Anyone could create a website. Heck, he'd even post a link to it.
"Louise saw the Web as a godsend," Berners-Lee wrote in his personal retelling of the Web's history. The Louise in question is Louise Addis, librarian at SLAC for over 40 years before she retired in the mid-'90s. Along with Paul Kunz, Tony Johnson, and several others, she helped create the first Web server in the United States and one of the most influential websites of the early Web.
She would later put it a bit differently. "The Web was a revolution!" That may be true, but it wouldn't have been a revolution if not for what she helped create.
As we found in the first chapter, Berners-Lee's curiosity led him on a path to set information free. Louise Addis was also curious. Her curiosity led her to try to connect people to that information.
She studied International Relations at Stanford University only to bounce around at a few jobs and land herself back at her alma mater working for a secret research lab known simply as Project M in 1960. Though she had no experience in the field, she worked there as a librarian, eventually moving up to head librarian. After a couple of years, the lab would go public and became formally known as the Stanford Linear Accelerator Center, or SLAC.
SLAC's primary mission was to advance the research of American scientists in the wake of World War II. It houses a two-mile-long linear accelerator, the longest in the world. SLAC recruits scientists across a broad set of fields, but its primary focus is particle physics. It has produced a number of Nobel prizes and has shared groundbreaking new discoveries across the world.
Research is at the center of the work done at SLAC. While she was there, Addis was relentless in her quest to connect her peers with research. When she learned that there wasn't a good system for keeping track of the multitude of authors attributed to particle physics papers (some had over 1,000 authors on a single paper), she picked up a bit of programming with no formal training. "If I needed to know something, I asked someone to show me how to do a particular task. Then I went back to the Library and tried it on my own."
A couple of years after she discovered the Web, Addis would start the first unofficial tech support group for Web newcomers known as the WWW Wizards. The Wizards worked -- mostly in their spare time -- to help new Web users come online. They were a profoundly important resource for the early Web. Addis continually made it her mission to help people find the information they needed.
She used her ad-hoc programming experience in the late 1960s to create the SPIRES-HEP database, a digital library with hundreds of thousands of bibliographic records for particle physics papers. It's still in use today, though its newest iteration is called INSPIRE-HEP.
The SPIRES-HEP database was a foundational resource. If you were a particle physics researcher anywhere in the world, you would be accessing it frequently. It ran on an IBM mainframe that looked like this.
The mainframe used a very specific programming language also developed by IBM, which has since gone into disuse. Locked inside was a very well organized bibliography of research papers. Accessing it was another thing entirely. There were a few ways to do that.
The first required a bit of programming knowledge. If you were savvy enough, you could log directly into the SPIRES-HEP database remotely and, using the database-specific SPIRES query language, pull the records you needed directly from the mainframe. This was the quickest option but required the most technical know-how and a healthy dose of tenacity. Let's consider this method the high bar.
The middle bar was an interface built by SLAC researcher Paul Kunz that let you email the server to pull out the records you needed. You still needed to know the SPIRES query language, but it solved the remote access part of the equation.
The low bar was to email or message a librarian at SLAC so they could pull the record for you and send it back. The easiest bar to clear, this was the method that most people used, which meant that the most widely accessed particle physics database in the world was beset by a bottleneck of librarians at SLAC who needed to ferry bibliographic records back and forth from researchers. The SPIRES-HEP database was invaluable, but widespread access remained its largest obstacle.
For a second time in the Web's history, the NeXT computer played an important role in its fate. For a computer that was short-lived and largely unheard of, it is a key piece of the Web's history.
Like Tim Berners-Lee, SLAC physicist Paul Kunz, creator of the SPIRES-HEP instant messaging and email service, used a NeXT computer. When Berners-Lee called him into his office on one of his visits, Berners-Lee invited him into his office. The only reason Kunz agreed to go was to see how somebody else was using a NeXT computer. While he was there, Berners-Lee showed Kunz the Web. And then Kunz went back to SLAC and showed the Web to Addis.
Kunz and Addis were both enthusiastic purveyors of research at SLAC. They each played their part in advancing information discovery. When Kunz told Addis about the Web, they both had the same idea about what to do with it. SLAC was going to need a website.
Kunz built a Web server at Stanford, the first in the United States. Addis, meanwhile, wrangled a few colleagues to help her build the SLAC website. The site launched on December 12, 1991, a year after Berners-Lee first published his own website at CERN.
Most of the programmers and researchers that began tinkering on the Web in the early days were drawn by a nerdy fascination. They liked to play around with browsers, mess around with some code. The website was, in some cases, the mere after-effect of a technological experiment.
That wasn't the case for Addis. The draw of the Web wasn't its technology. It was what it enabled her to do.
The SLAC website started out with two links. The first one lets you search through a list of phone numbers at SLAC. That link wasn't all that interesting, but it was a nice nod to the Web's origin. The most practical early use of the Web was as an Internet-enabled phonebook at CERN.
The second link was far more interesting. It was labeled "HEP." Clicking on it brought you to a simple page with a single text field. Type a query into that field, click Enter, and you got live results of records directly from the SPIRES-HEP database. And that was the SLAC website. Its primary purpose was to act as an interface in front of the SPIRES-HEP database and pull down queried results.
When Berners-Lee demoed the SLAC website a couple of months later at a conference, it was met with wild applause, practically a standing ovation. The importance was obviously not lost on that audience.
No longer would researchers be forced to wrestle with complicated programming languages, or emails to SLAC librarians. The SLAC website took the low bar of access for the SPIRES-HEP database and dropped it all the way to the floor. It made searching the database easy and, within a couple of years, it would even add links to downloadable PDFs.
The SLAC website, nothing more than a searchable bibliography, was the beginning of something on the Web. Physicists began using it and it rebounded from one research lab to the next. The Web's first micro-explosion happened the day Berners-Lee demoed the site. It began reverberating around the physics community and then outside of it.
SLAC was the website that showed what the Web could do. GNN was going to be the first that made the Web look good doing it.
Global Network Navigator was going to be exciting, a bold experiment on and with the Web. The Web was a wall of research notes and scientific diagrams; plain black text on stark white backgrounds as far as the eye could see. GNN would change that. It would be fun. Lively. Interactive.
That was the pitch made to designer Jennifer Robbins by O'Reilly co-founder Dale Dougherty in 1993. Robbins' mind immediately jumped to the possibilities of this incredible, new, digital medium.
She met with another O'Reilly employee, Rob Raisch. A couple of years after that pitch, Raisch would propose one of the first examples of a stylesheet. At the time, he was just the person at the company who happened to know the most about the Web, which had only recently cracked a hundred total sites.
When Robbins walked into his office, the first thing he said to her was, "You know, you probably can't do what you want." He had a point. The language of the Web was limiting. But the GNN team was going to find a way around that.
GNN was the brainchild of Dale Dougherty. By the early '90s, Dougherty had become a minor celebrity for experiments just like this one. From the early days of O'Reilly Media, the book publisher he co-founded, he was always cooking up some project or another.
Wherever technology is going, Dougherty has a knack for being there first. At one conference early on in O'Reilly's history, he sold self-printed copies of a Unix manual for $5 apiece just before Unix exploded on the scene. After spending decades in book publishing, he's recently turned his attention to the maker culture. He's been called a godfather of the Maker movement.
That was no less true for the Web. He became one of the Web's earliest adopters and its most prolific early champion. He brought together Tim Berners-Lee and the developers of NCSA Mosaic, including Marc Andreessen, for the first time in a meeting in Cambridge. That meeting would eventually lead to the creation of the W3C. He'd be responsible for early experiments with Web advertising, basically on the first day advertising was allowed. He would later coin the term Web 2.0 in the wake of transformation after the dot-com boom.
Dougherty loved the Web. But staring at the Web for the first time in the early '90s, he didn't exactly know what to do with it.
His first thought was to put a book on the Web. After all, O'Reilly had a gigantic back catalog, and the Web was mostly text. But Dougherty knew that the Web's greatest asset was the hyperlink. He needed a book that could act as a springboard to bring people to different parts of the Web.
He found it in the newly-published bestseller by author Ed Krol, The Whole Internet User's Guide and Catalog. The book was a guided tour through the technologies of the Internet. It had a paragraph on the Web. Not exactly a lot, but enough for Dougherty to make the connection.
Dougherty had recruited Pei-Yuan Wei, creator of the popular ViolaWWW browser, to make an earlier version of an interactive Internet guide. But he pulled a together a production team -- led by managing editor Gina Blaber -- of writers, designers, programmers, and sales staff. They launched GNN, the Web's first true commercial website, in early 1993.
GNN was created before any other commercial websites, before blogs, and online magazines. Digital publishing was something new altogether. As a result, GNN didn't quite know what it wanted to be. It operated somewhere between a portal and a magazine. Navigating the site was an exercise in tumbling down one rabbit hole after another.
In one section, the site included the Whole Internet Catalog repurposed and ported to the Web. Contained within were pages upon pages of best-of lists; collections of popular websites sorted into categories like finance, literature, and cooking.
Another section, labeled GNN Magazine, jumped to a different group of sortable webpages known as metacenters. These were, in the website's own description, "special-interest magazines that gathered together the best Internet resources on topics such as travel, music, education, and computers. Each metacenter contains articles, columns, reference guides, and discussion groups." Though conceptually similar to modern-day media portals, the nickname "metacenter" never truly caught on.
The site's content and design was produced and maintained by the GNN staff. Not to be outdone by their print predecessors, GNN magazine contained interviews, features, biographies, and explainers. One hyperlink after another.
Over time, GNN would expand to affiliated publications. When the Mosaic team got too busy working on the Web's most popular browser, they handed off their browser homepage to the GNN team. The page was called What's New, and it featured the most interesting links around the Web for the day. The GNN team seized the opportunity to expand their platform even further.
Explaining what GNN was to someone who had never heard of the Web, let alone a website, was an onerous task. Blaber explained GNN as giving "users a way to navigate through the information highway by providing insightful editorial content, easy point-and-click commands, and direct electronic links to information resources." That's a meaningful description of the site. It was a way into the Web, one that wasn't as fractured or unorganized as jumping in blind. It was also, however, the kind of thing you needed to see to understand, and it was something to see.
Years before stylesheets and armed with nothing but a handful of HTML tags, the GNN team set about creating the most ambitious project with the Web medium yet. Browsers had only just begun allowing inline graphics, and GNN took full advantage. The homepage, in particular, featured big, colorful graphics, including the hot air balloon that would endure for years as the GNN logo.
They laid out their pages meticulously. Most pages had a unique design. They used images as headers to break up the page. Most pages featured large graphics, and colored text and backgrounds. Wherever the envelope was, they'd push it a little further.
The result: a brand new kind of interactive experience. The Web was a sea of plain websites with no design mostly coming from research institutions and colleges. Before Mosaic, bold graphics and colors weren't even possible. And even after Mosaic's release, the Web was mostly filled with dense websites of scrolling text with nothing more than scientific diagrams to break it up, or sparse websites with a link, an email, and a phone number.
Most sites had nothing in the way of hierarchy or interactivity. Content was difficult to follow unless it was exactly what you were looking for. There was a ton of information on the Web, but no one had thought to organize it to any meaningful degree.
Imagine seeing all of that, day after day, and then one day you click a link and come to this. It looks dated now, but a splash page with bold colors and big graphics, organized into sections and layered with interesting content, that was something to see.
The GNN team was creating the rules of Web design, a field that had yet to be invented. In the first few years of the Web, there were some experiments. The Vatican had scanned a number of materials from its archives and put them on a website. The Exploratorium took that one step further, creating the first online museum with downloadable sounds and pictures. But they were still very much constrained by the simplicity of the Web experience. Click this link, download this file, and that was it.
GNN began to take things further. Dale Dougherty recalls that their goal was to "shift from the Internet as command line retrieval to the internet as this more digital interface, like a book." A perfectly reasonable goal for a book publisher but a tall order for the Web.
To accomplish their goal, GNN's staff used the rules of graphic design as a roadmap. As philosopher Marshall McLuhan once said, "The content of any medium is always another medium."
But the team was also writing a brand new rulebook, on the fly, as they went. There were open questions about how to handle Web graphics, new patterns for designing user interfaces, and best practices for writing HTML. Once the team closed one loop, they moved on to the next one. It was as if they writing the manual for flying a rocket ship while strapped to the wings and hurtling towards space.
As browsers got better, GNN evolved to take advantage of the latest design possibilities. They began to use image maps to make more complex navigation. They added font tags and frames. GNN was also the first site on the Web with a sponsored link, and even that was careful and considered. Before the popup would plague our browsing experience, GNN created simple, unobtrusive, informational adverts inserted in between their other listings.
GNN provided a template for the commercial Web. As soon as they launched, dozens of copycats quickly followed. Many adopted a similar style and tone. Within a few years, Web portals and online magazines would become so common they were considered trite and uninteresting. But very few sites that followed it had the lasting impact GNN did on a new generation of digital designers.
Ranjit Bhatnagar has an offbeat sort of humor. He's a philosopher and a musician. He's smart. He's a fan of the weird and the banal. He's anti-consumerist, or at the very least, opposed to consumerist culture. I won't go as far as to say he's pedantic, but he certainly revels in the most minute of details. He enjoys lively debates and engaged discourse. He's fascinated by dreams, and once had a dream where he was flying through the air with his mother taking in the sights.
I've never met Bhatnagar. I know all of this because I read it on his website. Anyone can. And his website started with lunch.
Bhatnagar's website was called Ranjit's HTTP Playground. Playground describes it rather well; hyperlinks are scattered across the homepage like so many children's toys. One link takes you to a half-finished Web experiment, another to a list of his favorite bookmarks arranged by category. Yet another might contain a rant about the Web or a long-winded tribute to Kinder eggs. If you're in the mood for a debate you can post your own thoughts to a page devoted to the single question: Are nuts wood? There's still no consensus on that one.
Browsing Ranjit's HTTP Playground is like peeling back the layers of Bhatnagar's brain. He added new entries to his site pretty regularly, never more than a sentence or two, arranged in a series of dated bullet points. Pages were laid out on garish backgrounds, scalding bright green on jet black, or surrounded by a dizzying dance of animated GIFs.
Each page was littered with links to more pages, seemingly at random. Every time you think you've reached the end of a thread, there's another link to click. And every once in awhile, you'll find yourself back on the homepage wondering how you got there and how much time had passed in the meantime. This was the magic of the early Web.
Bhatnagar first published his website in late 1993, just a few months after the GNN website went up. The very first thing Bhatnagar posted to his website was what he ordered for lunch every day. It was arranged in reverse chronological order, his most recent lunch order right at the top.
SLAC captured the utility of the Web. GNN realized its popular appeal. Bhatnagar, and others like him, made the Web personal.
Claudio Pinhanez began adding daily entries to the MIT Media Lab website in 1994. He posted movie and book reviews, personal musings, and shared his favorite links. He followed the same format as Bhatnagar's Lunch Server.
Entries were arranged on the page in reverse chronological order. Each entry was short and to the point, no longer than a sentence or two. This movie was good. This meal was bad. Isn't it interesting that - and so on.
In early 1995, Carolyn Burke began posting daily entries to her website in one of the earliest examples of an online diary. Each one was a small slice from her life. The posts were longer than the short-burst of Pinhanez and Bhatnagar. Burke took her time with narrative anecdotes and meandering asides. She was loquacious and insightful. Her writing was conversational, and she promised readers that she would be honest.
"I notice now that I have held back in being frank. My academic analysis skills come out, and I write with them things that I've known for a long time," she wrote in an entry from the first few months. "But this is therapy for me, honesty and freedom therapy. Wow, that's a loaded word: freedom."
Perhaps no site was more honest or more free, as Burke puts it, than Links from the Underground. Its creator, Swarthmore undergraduate Justin Hall, had transformed inviting others into his life into an art form. What began as a simple link dump quickly transformed into a network of short stories and poems, diary entries, and personal details from his own life.
The layout of the site matched that of Bhatnagar, scattered and unorganized. But his tone was closer to Burke's, long and deeply, deeply personal. Just about every day, Hall would post to his website. It was his daily inner monologue made public.
Sometimes, he would cross a line. If you were a friend of Justin's, he might share a secret that you told him in confidence or disparage you on a fully public post. But he also shared the most intimate details from his own life, from dorm room drama to his greatest fears and inadequacies. He told stories from his troubled past, and publicly tried to come to terms with an alcoholic father. His good humor was often tinged with tragedy. He was clearly working through something emotional and personally profound, and he was using the Web to do it out in the open.
But for Hall, this was all in the service of something far greater than himself. Describing the Web to newcomers in a documentary about his experience on the Web, Hall's primary message was about its ability to create--not to tear down--connections.
"What's so great about the Web is, I was able to go out there and talk about what I care about, what I feel strongly about, and people responded to it. Because every high school's got a poet, whether it's a rich high school or a poor high school, you know, they got somebody that's into writing, that's into getting people to tell their stories. You give them access to this technology and, all of a sudden, they're telling stories to people in Israel, to people in Japan, to people in their own town that they never would have been able to talk to. And that's, you know, that's a revolution."
There's that word again: revolution. Though coming at the Web from very different places, Addis and Hall agreed on at least one thing. I would venture to guess that they agreed on a whole lot more.
Justin Hall became a presence on the Web not soon forgotten by those that came across him. He's had two documentaries made about him, one of which he made himself. He's appeared on talk shows. He's toured the country. He's had very public mental breakdowns. But he believed deeply that the Web meant nothing at all unless it was a place for people to share their own stories.
When Tim Berners-Lee first imagined the Web, he believed that everybody would have their own homepage. He designed his first browser with authoring capabilities for just that reason. That dream never came true. But Hall and Burke and Bhatnagar channeled a similar idea when they decided to make the Web personal. They created their own homepages, even if it meant having to spend a few hours, or a few weeks, learning HTML.
Within a couple of years, the Web filled up with these homepages. There were some notable breakthrough websites, like when David Farley began posting daily webcomics to Doctor Fun or V.J. Adam Curry co-opted the MTV website to post his own personal brand of music entertainment.
There were extreme examples. In 1996, Jennifer Ringley stuck a webcam in her room and beamed images every few seconds, so anyone could watch her entire life in real-time. She called it Jennicam, a name that would ultimately lead to the moniker cam girl. Ringley appeared on talk shows and became an overnight sensation for her strange website that let others peer directly into her world.
But mostly, homepages acted as a creative outlet: short biographies, photo albums of families and pets, short stories, status updates. There were a lot of diaries. People posted their art, their "hot takes," and their deepest secrets and greatest passions. There were fan pages dedicated to discontinued television shows and boy bands. A dizzying array of style and personality with no purpose other than to simply exist.
Then came the links. At the bottom of a homepage, a list of links to other homepages. Scattered in diary posts, links to other websites. In one entry, Hall might post a link to Bhatnagar's site, musing about the influence it had on his own website. Bhatnagar's own site had its own chaotic list of his favorites. Eventually, so did Burke's. Half the fun of a homepage was obsessing over which others to share.
As the Web turned on a moment of connection, the process of discovery became its greatest asset. The fantastic intrigue of clicking on a link and being transported into the world and mind of another person was -- in the end -- the defining feature of the Web. There would be plenty of opportunities to use the Web to find something you want or need.
The lesson of the homepage is that what people really wanted to find was each other. The Web does that better than any technology that has come before it.
At the end of 1993, there were just over 600 websites. One year later, at the end of 1994, there were over 10,000. They no longer fit on a single page on the CERN website maintained by the Web's creator.
The personal website would become the cornerstone of the Web. The Web would be filled with more applications like SLAC, and more businesses like GNN, but it would mostly be filled with people. When the Web's next wave came crashing down, it would become truly social.
[Banjo music plays]
Dave: All right. Thank you, Jeremy. Thank you, Jay, of course, for writing all this stuff. 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 the 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: [Slobbering and whispers] ShopTalkShow.com.
Dave: [Vampire voice] Spooky!
Chris: Frankenstein's monster.