Social Cards with Ben Myers
Ben Myers guides Anthony Campolo through creating customizable HTML/CSS-based social media cards for promoting streams
Episode Description
Anthony Campolo launches his stream "AJC and the Web Devs" with Ben Myers, who walks him through building social share cards using plain HTML and CSS.
Episode Summary
In the debut episode of "AJC and the Web Devs," host Anthony Campolo brings on Ben Myers—his first guest, mirroring how Anthony was the first guest on Ben's accessibility-focused stream, Some Antics. The conversation begins with reflections on why developers start streams, emphasizing networking and learning over immediate monetary returns, before turning to practical advice for new streamers: start small, avoid over-investing in equipment, and build up skills incrementally. The core of the episode focuses on building social share cards—the promotional images streamers use to announce upcoming episodes—using nothing but HTML and CSS. Ben demonstrates his approach of creating a styled web page, setting it to thumbnail dimensions in dev tools, and using "capture node screenshot" to generate an image, contrasting this with the more common Cloudinary-based workflow. Together they customize a card for Anthony's stream, selecting colors extracted from his existing logo, layering a topographic pattern from Hero Patterns behind a radial gradient, and tweaking opacity values to ensure the text remains prominent. Ben also briefly shows how his own setup integrates with Eleventy for automation, while cautioning against premature optimization. The episode closes with a preview of the next guest, Ryan Carniato, and encouragement for aspiring streamers to start simple and iterate.
Chapters
00:00:00 - Stream Launch and the Value of Guest-Format Shows
Anthony Campolo kicks off the very first episode of "AJC and the Web Devs," welcoming Ben Myers as his inaugural guest—a fitting choice since Anthony was the first guest on Ben's stream, Some Antics, about a year and a half earlier. They joke about the symmetry and explain the stream's name and format.
The conversation quickly turns to why developers invest time in streaming despite no immediate financial return. Both hosts compare it to Anthony's podcast FSJam, arguing that the real payoff comes through networking, learning from guests, and building relationships across the industry. Ben highlights that meeting people through Some Antics has been the single biggest professional benefit of his streaming work.
00:04:06 - Starting Small and Choosing Your Streaming Tools
After a classic first-stream audio mishap—Anthony realizes he'd been using his AirPods instead of his mic—the discussion shifts to practical advice for new streamers. Ben's top recommendation is to start with the bare minimum: your face, a microphone, and a screen share, then iterate from there rather than trying to match polished setups right away.
Anthony explains his preference for StreamYard's simplicity for developer relations work, contrasting it with the steep learning curve of OBS. They discuss tools like VDO.Ninja and Theo Brown's Ping product for incorporating guests, and Anthony shares his philosophy that devrel streaming should prioritize clarity over production polish. The key takeaway is that automation and fancy setups should come only after you've identified genuine pain points through experience.
00:10:17 - Introducing Social Share Cards and the Cloudinary Approach
The pair transitions into the episode's main topic: building social share cards, the promotional images streamers use to advertise upcoming episodes featuring guest photos, titles, and scheduling details. Ben shows examples of his own share card tweets and explains the common industry approach of using Cloudinary's URL-based image transformation to layer text and images.
While acknowledging Cloudinary's strengths, Ben outlines its limitations—particularly the difficulty of making fine-grained tweaks like controlling exactly where text wraps across lines. Anthony notes he's seen numerous blog posts about the Cloudinary method, and they discuss how chat participants like Alex Trost also use it. This sets the stage for Ben's alternative: building share cards as plain HTML and CSS web pages.
00:15:00 - Building a Share Card from Scratch with HTML and CSS
Ben pulls up a thumbnail template repository he previously open-sourced for a local React meetup, clones it, and begins customizing it for Anthony's stream. The template is deliberately minimal—just an HTML file and a CSS stylesheet with no build process. They update the title, date, and show name, then swap in Anthony's donut avatar from GitHub.
Ben demonstrates the core workflow: set the browser's responsive view to 1280×720 pixels, right-click the HTML node in dev tools, and select "capture node screenshot" to generate a PNG. This simple technique gives full CSS control over the output without needing any external image service, and the resulting file works perfectly as both a social media card and a YouTube thumbnail.
00:25:21 - Designing the Background with Gradients and Hero Patterns
With the basic card structure in place, they turn to making the background visually interesting. Ben explains how his own Semantics cards use a tiled SVG pattern derived from his logo over a gradient, and introduces Hero Patterns—a free resource for SVG background patterns. They select a topographic map pattern that fits Anthony's journey-themed branding.
After choosing colors extracted from Anthony's existing AJC logo—a dark blue and a lighter cyan—they layer the pattern into the card's CSS using an inline SVG data URI. Ben then applies a radial gradient on top, adjusting opacity values through trial and error to ensure the pattern is visible but doesn't compete with the foreground text. A key debugging moment comes when they realize the stacking order of CSS background layers matters, which finally produces the desired effect.
00:46:22 - Fine-Tuning Layout, Typography, and Pixel-Perfect Control
The focus shifts to refining the card's typography and layout. Ben increases the font size from 70 to 90 pixels to improve readability at YouTube thumbnail scale, and they work through overflow issues by adjusting margins and element widths. Anthony asks about hard-coded pixel values in CSS, and Ben explains that since this page will never be consumed as a responsive website, pixel-perfect control is not only acceptable but preferred.
Chris Burns, Anthony's podcast co-host, suggests the Plus Jakarta Sans font, and they briefly explore Google Fonts as a quicker alternative. The conversation touches on how this HTML-based approach represents a fundamentally different way of thinking about CSS—using it as a templating engine for image generation rather than for responsive web design, which frees developers from the usual constraints around units and accessibility.
00:54:39 - Eleventy Integration, Automation Philosophy, and Wrap-Up
Ben shows his own more advanced setup where Eleventy's data cascade powers the share card generation—guest names, avatars, and stream details are stored in front matter and automatically populate the template. He demonstrates swapping a guest by simply changing a name in the data file, with both the avatar and text updating instantly. However, he emphasizes that this level of automation should come only after the basic workflow feels comfortable.
Anthony reflects on the host's responsibility to represent guests well through polished promotional materials, comparing it to his FSJam podcast experience. They discuss the potential for a community of shareable social card styles similar to Ben's Show My Chat project. The episode wraps with a preview of next week's guest, Ryan Carniato discussing Solid, and both hosts share where listeners can find them online, with Ben offering himself as a resource for anyone getting started with streaming.
Transcript
00:00:01 - Anthony Campolo
Hello everyone. Welcome to the first episode of AJC and the web dev woo! What's up Ben, how you doing?
00:00:11 - Ben Myers
I'm doing alright. You sent me this weird link and I clicked it fully expecting to get phished, and instead I'm just live for the world. And I kind of wish you had just stolen all the money out of my bank account instead.
00:00:23 - Anthony Campolo
No, you still don't have a MetaMask wallet, so I can't steal your money yet until you put your money into your browser.
00:00:29 - Ben Myers
So there we go. Yeah. No, it's great to be here. I'm super excited to be your first guest because you were my first guest. And so it just feels kind of cosmically karmic in a way.
00:00:45 - Anthony Campolo
Yes. Reciprocal stream guesting as it were. Yeah. You were launching an accessibility themed stream that you had so brilliantly named Semantics. And we've been chatting about some stream stuff at the time and you're like, hey, you want to be the first guest? And I was like, yeah, let's be the first guest. And now this is that. But a year and a half later, I think.
So you are already a full-on streaming professional, even to the point of creating a streaming business, possibly. And it's really great to have you on here to help me get set up with my stream, because I'm someone who streamed a lot, but I've never had my own stream. And you actually even came up with the name for this stream, which I am super thankful for. I thought that was a really good one. AJC and the web devs. I'm AJC, Anthony Joseph Campolo, and the web devs are you all, the guests and even the people in the audience such as Saban who just showed up.
[00:01:44] What's up Saban. Great to see you here. Saban's a buddy. Hello Charisma, who will likely be a guest in not too long. I've not asked him that, but I bet he would do it. So a great thing about streaming is you just have friends and you bring them on. You can build cool stuff.
And that's really the goal here for me. For people who do know me, they're probably thinking right now, Anthony, why are you doing another thing? You do not need to do another thing. My schedule is already so full, but I think that this is an opportunity for me to bring on people that I respect and who I feel I could learn a lot from and create an opportunity where both myself and our audience can learn a lot from them.
And I'm making a bet on this in the same way that I did with FSJam, which is something I put a ton of time into for literally $0 return, but I believe that it would have returns far greater than an immediate monetary return.
[00:02:41] And that's kind of what I'm betting on with my stream. And I think that's what you were believing with Semantics as well. And that's kind of proven to be true, right?
00:02:49 - Ben Myers
Yes, I mean, there are so many different kinds of streams out there. And I think we're going to absolutely get into this over the course of today's stream because as we'll see, nominally we're setting up your social cards, but really we're starting to set up your stream identity in a lot of ways.
And yeah, the kinds of streams that I do, that Alex Trost does, Jason Lengstorf, yourself, anyone who does this kind of bring on a guest type format, you get so much value from just networking with people and getting to hear from them. Probably the biggest lift I've gotten from Some Antics is just getting to know more people in my industry, right? Getting to network. I think that that is hugely valuable and is a very valid, selfish reason to do a stream, just to get to meet people like yourself and others in the industry.
[00:03:50] So that's a thing that I find very worthwhile as well.
00:03:55 - Anthony Campolo
Yeah. And in classic first stream fashion, I realized I was going through my AirPods for the last five minutes, but I should be going through my mic now. Hopefully that sounds a bit better for sure.
00:04:06 - Ben Myers
Listen, it's not a first stream if you don't have audio video issues. Yeah.
00:04:12 - Anthony Campolo
I had a weird echo thing going on in my first episode of Semantics for the first five or so minutes, but also you managed to course correct. So yeah, all good.
00:04:21 - Ben Myers
The other thing was I cropped you terribly so that you were missing the top.
00:04:25 - Anthony Campolo
Yeah. My head was all up.
00:04:26 - Ben Myers
Oh, it was criminal what I did to you. So yeah, this is something I really love what we're about to do here, which is kind of building the stream identity out in the open.
I think that I've seen a lot of folks get interested in streaming. We, you and I might describe a new wave of dev streamers, especially people who are very new to the industry, who are streaming their learnings live. And when I have given advice to that kind of new wave of dev tech streamers, the number one piece of advice I give is plan to start small with your content and then start even smaller than that.
You'll find people who have been in the business for a while. They'll have these very polished setups and gadgets and gizmos and widgets all over and things look very clean.
[00:05:26] And that can be hugely overwhelming. I think that can be a lot to try to set up and figure out before your first stream. And it can also be really expensive. Getting all the equipment that you want can be really expensive for something that you don't even know that you want to keep pursuing, you know?
So I always recommend to start with just your face, a mic, and your screen. Usually it doesn't need to be the best at any of those things. So just start small and build up from there as you kind of figure out where you want to grow. So you did not come into this with a full stream setup or you don't have a stream identity necessarily. You and I are flat faces in an endless black void, you know?
00:06:19 - Anthony Campolo
Exactly. Yeah. And the goal with the stream is also to give me an excuse to build up that kind of skill set and the kind of muscle memory with more advanced streaming technology. Because you're someone who, over the course of this last year and a half, you've added on little bits and pieces at a time, and you've set yourself up where you have full control and autonomy over your own stream setup because you built it from the ground up and so you know how to tweak it and modify it in every little specific way you could want.
And that's really what I want to eventually get to, because I'm someone who has been more mercenary in how I approach streaming. I am someone who has streamed for devrel content. And I have a very strong opinion on this versus people who are more content creator focused, who are like, you need to have the best kind of setup possible.
And what I think is for devrel people, I think it's the opposite, that you should actually, as you say, lean into the kind of bare bones part of it because you're ideally teaching something and you're trying to get across content that is not meant to be flashy and polished. It's meant to be understandable and clear and straightforward.
[00:07:31] And so I think that giving yourself slightly more of a baseline of just using something like StreamYard where I can easily have our faces here, I can easily share a screen, I can easily bring a guest on. And you would admit that just bringing a guest on with OBS requires a lot of knowledge and work and setup. It's not just a turnkey kind of solution, right?
00:07:54 - Ben Myers
Absolutely. And there are tools out there on the market that are trying to make that easier right now. Some of the biggest ones—hey, Adrian, welcome. Yeah, I know Adrian knows full well streaming setup woes.
But yeah, there are tools on the market that are designed to make slight pieces of the OBS streamer setup easier. You mentioned bringing in guests. There's VDO.Ninja, which is a free product. And then there's Ping, which all the cool kids are talking about these days, which is a paid product by Theo Brown. That is designed to more easily incorporate guests into your flow.
But this is because OBS is this kind of minefield of infinite configurability, and it's not very intuitive. It's not the easiest app to use in the world.
[00:08:47] And so, yeah, figuring out how you can skate by in your earliest streams with the bare minimum I think is huge. Especially because what you should be doing for your first few streams is figuring things out. What do you like? What don't you like? How can you improve? Right?
You're not going to come into your first stream with everything decided, because you just don't have that experience. You don't have that full context. You don't know necessarily how you're going to be a host until you're a host.
00:09:17 - Anthony Campolo
Yeah, exactly. And Theo is, when I think of the straw man content creator who hates StreamYard, Theo is the person I have in mind specifically. But I have great respect for Theo's streaming ability, and the fact that he's building a whole company aimed at giving a streaming solution, I think is awesome.
And I may even convince my boss to pay for Ping for my job streaming just because I want to use it. And that would be a good excuse to use it and not have to pay for it myself. So yeah, I undoubtedly will have Theo on at some point. Given his busy schedule, I'm sure I can convince him to make an appearance.
But when we get into what we're actually here to do, which is building out our social share cards. And so this is a kind of small, seemingly small, but actually I think very important part of having a stream, which is when you're advertising an upcoming stream, you need to have some sort of image to do that because you don't want to just have a link to your Twitch and saying, hey, here's an episode with this person.
[00:10:17] You kind of want to have something to make it a little bit nicer and more presentable. And the way you usually do that is you have some sort of image that has both guests' heads and the title of the episode, and maybe the time where it's going to happen as well.
And this is something that is very common across all of these streams. You have this, Jason has this, Alex has this. So it's a very common thing. And your solution for this I thought was just so cool when you explained it to me, because you literally just wrote a bunch of HTML and CSS to create an image and you can slot in avatar photos or things like that. Let me go ahead and share a screen here.
00:10:58 - Ben Myers
Yeah. I've gone ahead and pulled up Twitter. So yeah. First of all, especially when you've got someone else on, this is one of the hosting opinions I've got. If you've got a guest for a scheduled event, I believe as a host you have a duty of care to promote the stream, right?
And so yeah, I like to send out these tweets. It's like, hey, here's what's coming up, a link to where you can watch it. I've got this add to calendar link, which, by the way, AddToCalendar.com is a wonderful tool. You should absolutely be using this to schedule your—this generates all of your Google Calendar links or whatnot, and it lets you kind of change the events after the fact as well if you need.
[00:11:44] But what we're talking about here is this bit where I've got this little image that has this title. Oh, okay. Yeah. So we're having this conversation in the chat about how Kirk Kemp has done it. Kurt, I believe, has used a solution with Cloudinary, which is fairly common. I know Jason does this as well.
It's those kinds of solutions I think are super cool. What they do is they use Cloudinary's URL transformation process to basically put all of this content as layers against an image.
00:12:23 - Anthony Campolo
And that makes sense to me because I would imagine Cloudinary, if I was to think of from first principles how I would build something like this and where I've seen other people share similar things, is always build a social share card with Cloudinary. I've seen four or five people write that exact blog post before, so that makes a lot of sense.
But what you're doing is you're taking it back a level and saying, hey, Cloudinary is great. Doing this with a service is great, but if you wanted to actually do this yourself without having to use a service, this is a way to do it.
00:12:56 - Ben Myers
That's exactly it, right? It's this whole, what is the absolute laziest I could make this and what is the most failproof I could make this? With Cloudinary, you know, with the Cloudinary solutions, you kind of cede over control, right?
So let's take as an example this text. All of your streams are going to have a title, right? But I sometimes find myself needing to do slight tweaks because I'm like, well, I actually really would prefer one word to appear on a different line. So maybe I'm going to change the font size and stuff like that.
If you're fully automating everything with Cloudinary, that's going to be a little more difficult, right? You have to then do a bunch of one-off things. So Cloudinary is an excellent hammer for this kind of problem, but it can be tricky to wield sometimes. For some of these things, you have to set up a whole build process, and then you don't have a whole lot of flexibility for the one-off tweaks.
[00:13:54] So it's a trade-off, right? I'm not going to insinuate one way is better than another. Personally, I prefer this approach for my needs and preferences. What we're about to see today—hey, we were just talking about, yeah—good old, in a good way.
00:14:08 - Anthony Campolo
Yeah. You have your own show cards like this. Do you know, Trost, how he creates his?
00:14:14 - Ben Myers
I'm sure you can answer, but I think it's Cloudinary as well. A lot of folks are doing the kind of Cloudinary approach. Yeah. Okay, cool. Yeah.
00:14:23 - Anthony Campolo
There you go.
00:14:24 - Ben Myers
Yeah. So there's a lot to love about the Cloudinary approach. That's not how I do these, but there's a lot to love, and I don't want to diss it. It's just a different set of preferences and constraints.
00:14:36 - Anthony Campolo
Yeah, yeah. Cloudinary is an awesome service. And I've built examples with it at previous companies. And it's like StreamYard. StreamYard gives you the ability to do things very simply. And you cede control for the ease of use. And that's always a reasonable trade-off to make. It's just, everyone has different trade-offs they want to make when they create stuff like this.
00:15:00 - Ben Myers
Absolutely. Yeah. So my approach is I make a web page. I want to see if I still have this up public. Let's see. Thumbnail. I might have hidden it.
00:15:14 - Anthony Campolo
By the way, I appreciate your DuckDuckGo usage. That's how you know you're a real web professional. Use DuckDuckGo.
00:15:25 - Ben Myers
Yeah. Yeah. I need to be using DuckDuckGo more. This is actually in kind of a browser profile I mainly just use for streams and whatnot. But yeah. So what I have here and I'm going to go ahead and—Adrian, basically this fits into an Eleventy setup I've got. I'll go into that a little more deeply, but yeah.
So I've just sent y'all a link to a web page that I've got, and it's a full web page. You know, I can resize this stuff like that. What one thing you'll notice that's kind of fun is I've made all of these text fields content editable. So, you know, this part now says.
00:16:09 - Anthony Campolo
Why is this the most recent one? Is this your actual process in terms of you will always have whatever the last stream you did be set to this specific URL?
00:16:21 - Ben Myers
Right now it's all hard-coded. I put it in stream details in my setup. But yeah, mainly because I find myself every once in a while having to go back and edit a different stream's video. You know, maybe three streams ahead, the title changes or something like that. Oh yeah. I have not bundled the fonts with this. So that is a problem there.
But yeah. Anyways, so it's a web page though, and the quickest summary of why I like doing this as a web page is I can go ahead—I'll say, so I'm in my dev tools, right. I can go ahead and say that I want 1280 by 720. This should look like a very familiar aspect ratio. And then in my dev tools I can go to HTML, and I could right-click on that and I can say capture node screenshot.
[00:17:19] And oh, there's an image that just downloaded. And if I open that up, boom, we have an image, right? Okay. So there's a few things here and there. It captured the misspelled name or whatever, the fact that it thinks Campolo is not valid, but we can tweak this. Okay. Yeah. I didn't know that about the Cloudinary API, but that makes sense.
00:17:46 - Anthony Campolo
Yeah. And that's the benefit here, is that you have the full power of CSS in what you're doing here. All of it. He spells his last name—my last name is not yet a word until you teach your browser that it's a word.
00:18:04 - Ben Myers
Yeah.
00:18:05 - Anthony Campolo
You make sure it knows you.
00:18:07 - Ben Myers
You could get rid of this if you didn't have the content editable. This is just a little tweak that I've added recently that I may actually roll back at some point. But yeah. So this is broadly it, right? I've made a web page. I can edit it in my editor. I question how.
00:18:24 - Anthony Campolo
How are the images being done here? Are you just pulling an image from a URL and just placing it there?
00:18:31 - Ben Myers
Yeah, that's a fantastic question.
00:18:33 - Anthony Campolo
I mean, the image of the avatar specifically is what I'm referring to.
00:18:36 - Ben Myers
Yes. The answer is yes. And I actually do have Cloudinary for that. I maintain a Cloudinary library of all the avatars.
00:18:46 - Anthony Campolo
Is embedded within this solution. Yes, yes. Interesting.
00:18:51 - Ben Myers
So I could show you the full setup, but it's very custom to me and how I like to work, which is because I've got 11 streams. I figure it might make more sense, though, for us to start even just bare bone basics. And then you can take what we build. We can build something in just plain HTML and CSS, and then you can kind of come in after the fact and you can say, well, actually I want to incorporate this into some other flow. You know, maybe.
00:19:19 - Anthony Campolo
Ideally.
00:19:19 - Ben Myers
For me out of it.
00:19:20 - Anthony Campolo
I would like to be able to just grab a GitHub avatar URL and just paste an image tag. To me that would be the ultimate.
00:19:29 - Ben Myers
Yeah. So let's do that. And actually to kind of cheat here, a year ago I open sourced a template that's going to look basically like my thumbnail, but for the local React meetup. Let's see here.
00:19:48 - Anthony Campolo
I've spoken at this meetup long ago, almost two years ago now. I did a Redwood talk for this meetup.
00:19:54 - Ben Myers
Yep. So here's a repo that I open sourced. Anyone can clone this if you want. Seriously. But let's go ahead and kind of work with this and see what we've got here. So I'll open up my terminal here. I need to close out of a few running processes I've got, but okay. So let me just make.
00:20:18 - Anthony Campolo
It's fun looking at this image and kind of seeing that the seeds of semantic within it.
00:20:24 - Ben Myers
Yes. Okay. Yeah. So I'll scroll down here because yeah.
00:20:26 - Anthony Campolo
Yeah. Right there.
00:20:27 - Ben Myers
Like screenshot, right. It's the Semantics template. I've just adjusted it for some branding for the local meetup, right. But it's the same thing. It really is.
But if you look at this repo, there's not a whole lot to it. We've got an HTML file. We've got the meetup logo, we've got the background, we've got some CSS. It is bare bones. There's no build process for this, because I'm at the point with my setup where I don't need a build process for it.
You know, this is the thing about automation. I feel like people are so quick to reach for automate all the things. And it's like, no, automate to the point where you don't have any pain points. And then when you feel like you've got pain points again, automate that. Because if you automate all the things, you're creating your own pain points.
So I'm at the point where I'm happy enough with my setup that I can tweak my HTML page.
[00:21:25] I can capture node screenshot. That is painless enough for me that I'm happy with it. And I don't feel like I'm overcomplicating things. This is a big feeling I have about automation.
Yeah. So let's go ahead. I'm going to make a directory called Anthony, just to have something to work in, and then that's.
00:21:52 - Anthony Campolo
Anthony.
00:21:56 - Ben Myers
So what I've just done, I've created a directory, I've cloned the thumbnail template repo. And we can actually start kind of looking into this. And as you can see it's you know.
00:22:04 - Anthony Campolo
So this is not an Eleventy project. It's literally just a straight up HTML file with a CSS style sheet pulling in.
00:22:11 - Ben Myers
Yep. I wonder, do I still have browser sync? Let's find out.
00:22:19 - Anthony Campolo
Oh, look who just showed up. Mr. Burns.
00:22:22 - Ben Myers
Hello? Hello.
00:22:26 - Anthony Campolo
For those who don't know, this is Chris Burns, my podcast co-host. We were talking about at the beginning of the show how me launching this feels a bit like FSJam, and that it's my own thing, that I can do whatever I want with, and I really like that. Chris was the one who boldly went into the unknown with me on my podcast.
00:22:44 - Ben Myers
Yes, absolutely. So this has a lot of things just to start, or even not really a whole lot. Right? It's got a few things that we need. So we've got our stream title. What have we called this stream, Anthony?
00:23:01 - Anthony Campolo
This one was social share cards, I think is what it was called.
00:23:05 - Ben Myers
Social share cards. Oh, you know, I should probably spell cards correctly. And this is, we'll say Monday, August 22nd, 2022. Call this AJC and the Web Devs.
If I come back to Chrome here, you can see we've already got quite an improvement here.
00:23:36 - Anthony Campolo
Yeah, that's the vast majority of the information is already there on screen. You just gotta put my head instead of floating React head.
00:23:45 - Ben Myers
Yeah. And so what's the best way to get a picture of your headshot?
00:23:50 - Anthony Campolo
Oh, that's a good question. Let's go with a donut for now. I'm feeling the donut vibe right now. So let's go to either my GitHub or my Twitch, or my Twitter. I mean, GitHub is probably the place to go.
00:24:04 - Ben Myers
All right.
00:24:04 - Anthony Campolo
Yeah, my sweet loopy donut. One day I may use my face instead, but today I'm feeling the donut vibe. It's an NFT for anyone who does not know. I paid $10 for that donut. It was worth every penny.
00:24:23 - Ben Myers
I am afraid I will never understand. And this is okay.
00:24:30 - Anthony Campolo
Cool. This looks awesome.
00:24:31 - Ben Myers
Right. So we're already like, I feel like I kind of took.
00:24:37 - Anthony Campolo
I could just take this and use the browser to make it look how I want and then grab a screenshot, and that right now could do exactly what I wanted it to do.
00:24:48 - Ben Myers
Yes. And the easiest way to make your browser do what you want is go inspect and then in the responsive view. So it's 1280 by 720. From what I can tell, that seems to be the ideal dimensions for social cards and thumbnails, because that's another thing—I love reusing these cards as thumbnails on YouTube. Just because it looks better than just it generating a random frame from the video. So yeah. So we could do different things to this.
Are there things you want to do to improve the look of this?
00:25:21 - Anthony Campolo
First thing that would occur to me would be the background. And getting some sort of nice gradient looking thing like you have on yours.
00:25:30 - Ben Myers
Yes. So let's see how best to do this. Maybe we start with a linear gradient. Okay.
00:25:38 - Anthony Campolo
Gradients, I know, are a common thing that looks really nice on background images. And I think you do have a gradient on yours.
00:25:48 - Ben Myers
So I've got a background image that has this kind of tiled pattern. That's kind of what I've got. And I generated that in Inkscape ahead of time. But we could really.
00:26:00 - Anthony Campolo
Just for that.
00:26:01 - Ben Myers
Oh, that's a great question. So Inkscape is an SVG editor. It's akin to, I think, Illustrator. It's the free, open source SVG editor. So big fan of that. I highly recommend.
Is it even a real website if it does not use Tailwind? No. Websites were invented the year that Tailwind was invented. No, I will not be taking questions here.
Okay. So what we've got currently is there's this background image set to background.jpeg. And then I've got this backdrop filter that actually does add—if I comment this out, we'll see that the real image is actually just a straight up photo of the meetup room.
00:26:58 - Anthony Campolo
Okay. That's cool. That's a nice touch.
00:27:01 - Ben Myers
Yeah, I like this because, first of all, this is the background image that if you were to go to the meetup's Meetup.com page, this is the cover image that they use just with these grayscale transformations. So it's already part of their branding, which I think is a key thing. Right? Like when you've got a branding, find ways to reuse it and reincorporate it.
But at the point where it is in the thumbnail, I don't think it's distracting in any way. In fact, you might not even notice that it's a photograph at first.
00:27:36 - Anthony Campolo
It's.
00:27:36 - Ben Myers
Pretty.
00:27:37 - Anthony Campolo
It's pretty seamless. And because the tint of it makes it just dark enough that you can see it if you look for it, but it doesn't stick out at you.
00:27:47 - Ben Myers
Yeah. If we go back to here, right, at this size especially, which is probably where a lot of thumbnails are going to show, the lights and stuff almost seem like generated noise, more than lights in a room.
So I like that. That's a helpful thing, I think, to keep in mind. Right? You want something that's visually interesting, but absolutely takes the back seat to the text and images on top of it. So something that provides a little bit of complexity but not an overwhelming amount of complexity. And gradients are a great way to do that.
00:28:27 - Anthony Campolo
So and what's the image that's on the back of yours right now?
00:28:32 - Ben Myers
This is—so I have on my site here, I've got a little logo here that's this geometric, it's supposed to be a heavily stylized 90s Memphis style rendering of a B and an M for my initials.
00:28:49 - Anthony Campolo
Oh, is that what that is?
00:28:50 - Ben Myers
Yeah, it's designed to...
00:28:52 - Anthony Campolo
I never knew that.
00:28:53 - Ben Myers
It's designed so that you wouldn't have to notice that and be like, oh I see it's clearly a B.
00:28:59 - Anthony Campolo
I thought they were like wings. That's kind of how I imagined it.
00:29:03 - Ben Myers
I called this rebrand Phoenix because I thought that together this looked like a fire.
00:29:08 - Anthony Campolo
Rising from the.
00:29:08 - Ben Myers
Ashes. But yeah, so what I have, though, is—it turns out, whereas here it is—it turns out that those shapes tile perfectly. It's the FedEx arrow of web dev. I love it.
00:29:24 - Anthony Campolo
The arrow in the FedEx logo. I never noticed it.
00:29:27 - Ben Myers
Yep. Yeah. And so it turns out these shapes tile endlessly. Like, perfectly. So I just have this pattern where I created this outline. And then I do have, you'll notice that there is a gradient here where it's darker on the left and lighter on the right. Mainly because I wanted to make sure that the text stood out.
Color contrast, as you might imagine, is something that's important to me, but it's also something that makes a more visually stunning graphic image, I think, especially because the avatars usually tend to provide their own brightness and that kind of stuff. These are just thoughts that I have, right? Like your text should stand out more than the images because the images already stand out plenty as is.
00:30:13 - Anthony Campolo
Yeah, yeah. No, that makes sense. And the text is where the most information is, in terms of: what is the episode? What's it going to be about? Why should the viewer care about this particular episode versus anything else flowing to their feed?
00:30:28 - Ben Myers
Absolutely. One thing, and I'll sneak preview something I've been working on, which is I've been building a.
00:30:35 - Anthony Campolo
This is the kind of hot take I'm looking for the hot tip, not hot take.
00:30:40 - Ben Myers
So for my own streams, I've been building up a.
00:30:45 - Anthony Campolo
You just have that deploy preview, like, on hand, able to type out.
00:30:50 - Ben Myers
I've sent it to so many people at this point. So I'm working on building a site for my own streams, and you can see that this is the cover I'm kind of going with for this. And this I feel like meets the whole—it's got a gradient. It goes from black to completely transparent over here. But it's also got this pattern in the background and the pattern I actually nabbed. And we can do this for your card if you want.
I nabbed this from a site called Hero Patterns, which is incredible. There's never enough purple.
00:31:24 - Anthony Campolo
For those who don't know, purple is Semantics' official color.
00:31:30 - Ben Myers
Yes. So, yeah, I grabbed this formal invitation gradient, and then I just kind of dropped it in the cover, the hero. And I had a gradient applied, and it was just actually kind of a happy accident.
00:31:44 - Anthony Campolo
Yeah, this is great. This is exactly what I was hoping for, which is nice kind of geometric shaped, like nonspecific geometric shapes that kind of look nice as a background image. But I couldn't necessarily generate myself with my current level of design ability. So this is awesome. So this is Hero Patterns dot com.
00:32:09 - Ben Myers
Yes. I've given the link in the Twitch chat. What say we start with—I'm actually really curious about this topography one. Do you want to try this one?
00:32:18 - Anthony Campolo
Yeah. For sure. Yeah. It's somewhat organic.
00:32:23 - Ben Myers
Yeah. And it's a topographic map. And so if you're leaning into journeys and tracks, it could be a good tie-in there. So all right, the other thing we'll need to know is what colors you're interested in here. Yeah. We've kind of talked about this ahead of time, but let me know what your thought process is.
00:32:44 - Anthony Campolo
Yeah. So I mean, for me, I'm feeling the blues. You know, I think that you've already monopolized purple and purple's a great color, but I don't want to steal your purple thunder. And I have already had—if you go to my Twitch, you see that AJC. There's a funny story. This is—it's not great, but it's better than nothing. And that's why I kind of had this as my background thing.
This was just said, buddy, I got the blues. But I generated this from a logo generator like two years ago when I was first getting into web dev, and I wanted to have a logo. I had no idea how to create a logo, and I didn't have the ability to create a logo by hand. So I literally just plugged in my name into a logo generator and they're like, give us a couple different themes. Of the themes, like technology.
00:33:34 - Anthony Campolo
And so there's a terminal there, and it's just like a circle with a background and there's two colors. And for me, this kind of worked for a while, but I want to make this look nicer and more legit. So I think these would be good starting colors to kind of create a more modern look around.
00:33:50 - Ben Myers
Yeah. So here's what I'm gonna do—I'm gonna try to find a way to extract the colors from this. So let's just Google and see if we can find a sketchy site that will do it for us. That's the best thing to do. I almost was like, extract the.
00:34:05 - Anthony Campolo
The thing you can do is you can download an image and open it in Preview and then do a color dropper, and that will give you the specific colors. So that's one way to do it if this does not accomplish it.
00:34:15 - Ben Myers
Yeah. Uh oh. Well can we. All right. Let's see. What I'll do—the way I'll do this real quick is boom! We'll drag this up here. We'll save that. There we go. Nice. Bring it in here.
00:34:32 - Anthony Campolo
Look at that.
00:34:33 - Ben Myers
All right. Oh, is it gonna go, you think? Okay. Aha. Okay. Cool photo.
00:34:41 - Anthony Campolo
Yeah. Are you familiar with this?
00:34:44 - Ben Myers
No.
00:34:45 - Anthony Campolo
Oh, this is trolling us. Is this a real thing?
00:34:49 - Ben Myers
Okay. So yeah, we have photo editor.
00:34:54 - Anthony Campolo
Yeah. Looks like a real thing.
00:34:57 - Ben Myers
So we have kind of two colors here. There's this like dark blue and then there's this like light cyan. I guess not quite cyan, but like light blue going on.
00:35:04 - Anthony Campolo
You're looking at Chris. This is what an AJC logo has looked like in the past.
00:35:09 - Ben Myers
Mm-hmm. So I think what would look really sharp is if we make the background color that darker blue. Yeah. Oh, it's already coming out nicely. And then we'll make the foreground. We'll use your lighter blue here.
00:35:30 - Anthony Campolo
Yeah. That's what, that's the plan here. If you've got design tips, Chris, feel free to throw 'em in.
00:35:38 - Ben Myers
All right. And so it now generates the CSS that we need. And as you can see, it's a big old data image inline SVG. But that's actually going to be super convenient for us here. So let's just—I'll comment these out so we have them. Let's see how we.
00:35:59 - Anthony Campolo
You don't have any written material around this, right? So I'm just saying, this is—I feel like I should write a blog post about this.
00:36:07 - Ben Myers
I haven't done a tutorial on this. No.
00:36:09 - Anthony Campolo
Yeah, because this is right here. If we could distill this down to some written content, I feel like a lot of people would want to do this and realize this is actually a super dope solution that no one has even thought of. So that's not a thing for you to do, a thing for me. I'm just bookmarking it in my brain right now.
00:36:28 - Ben Myers
Yeah. No, absolutely. I'm wondering, is the dot dot dot just a feature of VS Code?
00:36:35 - Anthony Campolo
I like it. I don't mess around with SVGs. And this is why—because you end up with a long line of nonsense I don't know what to do with.
00:36:42 - Ben Myers
Well, let's see if that worked. Let's see where... where are we? Here we go. Okay, so it is working.
00:36:52 - Anthony Campolo
Yeah, we want to take that and make it a lot darker, but that's a good starting place.
00:36:58 - Ben Myers
Yeah. Absolutely. And that is excellent feedback. That's exactly the feedback I was going to try to solicit. Right? Like, what do we want to do with this from here?
00:37:07 - Anthony Campolo
You want to make it more of a nondescript background kind of shape thing, like we did with the other one where you had a bunch of people in it, but you didn't necessarily notice that. You want this kind of background, but in a way that's not popping out of your face like it is right now.
00:37:22 - Ben Myers
Yeah.
00:37:24 - Ben Myers
So my favorite way to do that is with linear gradients. So I wish I could see the rest of this.
00:37:36 - Anthony Campolo
Can you try bumping your font down a little bit? Would that show more of it? No.
00:37:42 - Ben Myers
No, it doesn't seem like it is.
00:37:44 - Anthony Campolo
What if you copy paste it into a text file?
00:37:51 - Ben Myers
That'd be good. I think, you know what, we actually do have here—let me nuke this.
00:37:57 - Anthony Campolo
Or can you break it into multiple lines?
00:38:00 - Ben Myers
Yeah. That was so weird. Oh, I wonder if it is word wrap. I wonder if that's just the setting that I've got in. Okay. Settings. Let's try wrap. Word wrap on. Let's see. Aha. Thank you. That's it. Yeah.
00:38:24 - Anthony Campolo
Like 90 lines of SVG or...?
00:38:27 - Ben Myers
It's a massive SVG here. But even so, this will probably be more performant than if you were to serve this as a JPEG or something like that.
00:38:38 - Anthony Campolo
No, this is why SVG is dope. I just don't understand it. Yeah. So I see something like this and I'm like, what is happening here?
00:38:48 - Ben Myers
That's a great question. Basically it's a bunch of instructions. So you'll notice that there's a bunch of letters.
00:38:56 - Anthony Campolo
But also, there's a couple properties in the beginning, beyond when it breaks into total nonsense, where there's the first couple lines. And what are those doing specifically?
00:39:07 - Ben Myers
Yeah. So okay, so we have the width and the height, which is setting how big the SVG is. Right? This is akin to the width and height you might apply to an image. But importantly, and there's so much I have yet to learn about SVG as well, but this connects to an interesting thing which is called the view box.
There's an amazing article by Amelia Wattenberg where she talks about how view box works. But effectively, an SVG—you can think of it as an infinite plane that just exists on your website. Right? And when you're looking at the icon in the SVG... Thank you so much for sharing that. When you're looking at the icon or the graphic in the SVG, you're really looking at it through a window into that infinite plane.
And so the viewbox aligns the window against the plane. So you can basically move around the viewport and see different parts of it. And this is important because SVGs are math.
00:40:07 - Ben Myers
They're theoretically infinite.
00:40:09 - Anthony Campolo
As Adrian said, math. Math is what is happening.
00:40:12 - Ben Myers
Yes. So there's other things going on. But then you've got this D attribute. And this is where you specify all the shapes and curves that go into an SVG. So you've got these letters like M, and each letter refers to a different kind of instruction that basically is akin to moving the cursor around the screen. Yeah.
00:40:39 - Anthony Campolo
And so that's the part where it's going to handle its business. And I don't need to necessarily worry about that. Whereas things like the width and height—that's something where me as a developer, if I want to tweak this, then I need to know that I can kind of tweak that there. But for the most part, you have this huge mess of math that's going to do its thing and I don't really need to worry about.
00:40:59 - Ben Myers
Yeah, we're not going to worry about that. What we're instead going to do is we're going to put, I think, a radial gradient on top of this. And so radial gradient—I know I always have to look up radial gradients on MDN, just to make sure. Wow, having a great time with the spelling.
00:41:19 - Anthony Campolo
A great lesson for anyone watching. Even the pros Google things all day as they're doing their day-to-day work.
00:41:28 - Ben Myers
Yep yep yep. So yeah, the basic syntax here is we could say it's a circle at, and then there's positions. So we could say center or top left or bottom.
00:41:39 - Anthony Campolo
Right.
00:41:40 - Ben Myers
A little bit. Oh, yeah.
00:41:42 - Anthony Campolo
Your font up a little bit.
00:41:43 - Ben Myers
Yeah. Yeah, sure. We can then specify at the beginning of the gradient, here's the color you should be using. We can specify a few stops—so colors it will transition to along the way. And then at the end of the gradient, here's what it should look like. So what we want is something that's probably lighter up here and goes to dark down to the right.
00:42:10 - Anthony Campolo
Right. Yeah.
00:42:12 - Ben Myers
So what I would maybe do is say circle at top right. And we'll say that this is—I think we can just say transparent here at zero. So at the beginning of our gradient. And then let's go with RGB, and we're going to use the fancy new RGB syntax. This is totally fine to use because, ideally, none of your... even if you're worried about browser compatibility issues, in general, like older browsers and whatnot, you don't need to worry about this in this case because you are your only consumer.
00:42:46 - Anthony Campolo
That's true. Yeah. Because you are generating an image and you're using that image for your own purposes. So whether it works on someone else's browser is not necessarily important. Because is there a point where it goes from a browser image to something that's actually a PNG somewhere? Like, do you actually turn it into an image file at a certain point?
00:43:08 - Ben Myers
Yeah. Well, so that's when I open up dev tools and do capture node screenshot, and the browser turns that into the PNG for me. So yeah.
00:43:17 - Anthony Campolo
Yeah. Yeah, that's a really interesting point. At a certain point, this is going from browser to image. And so where that point happens is when it stops being something that's dependent on your own machine and your own browser setup and having, you know, the right browser with the right version and all that. And that's just a universal image that can be shared around to anybody.
00:43:39 - Ben Myers
Yep. So let's see if this worked. It might not have. We'll see. Okay. It's very, very subtle. You can see that it is actually darker to the left though.
00:43:47 - Anthony Campolo
Yeah. It kind of looks like just a shadow a little bit.
00:43:50 - Ben Myers
Yeah. What I'll do is I'll say... and just to clarify my syntax here, so just like you're familiar with RGB, 000 stands for the color black. And then you can do this slash and then a decimal from 0 to 1. And that'll be your alpha channel. So how transparent it is. So the bigger this number, the alpha channel, the more transparent it will be.
So I'm actually going to say, let's make this... I don't know, I always have to do trial and error here. So let's say up here in the dark... we'll actually say it's 30. Sorry. Up here in the top right, we'll say it's 35% transparent. And then we'll say it's 15% transparent at the end, and we'll see what that does to it. That doesn't seem to have done it.
00:44:40 - Anthony Campolo
Do you want to get your screen set up so you have your editor on one block and then the other one on the other side?
00:44:44 - Ben Myers
Yeah.
00:44:45 - Anthony Campolo
The changes in real time. Yeah.
00:44:49 - Ben Myers
Okay. So we need something harsher, I think. Oh. Oh, that's right. This needs to have a zero at the end. That's the problem.
00:44:59 - Anthony Campolo
Having a zero at the end?
00:45:01 - Ben Myers
Okay. Just confirming things. Oh, interesting. The zero and... I'm just making sure I get the syntax right first. So this specifies here's what it should look like at the beginning of the gradient. This is the first stop. And then 100% says this is what it looks like at the end of the gradient. For some reason it's not quite going that... oh, did I do this in the wrong... Ah okay. I was... I was okay.
00:45:28 - Anthony Campolo
Do you have it backwards?
00:45:30 - Ben Myers
Yeah, I had it backwards. So let's actually make this. Oh, that's cool.
00:45:36 - Anthony Campolo
Yeah. That's closer to what we're looking for. So you want something that's kind of almost like a dark mode kind of look. That's what I like about your whole aesthetic is that you've got a purple aesthetic. That's a purple aesthetic that's kind of a dark mode aesthetic at the same time.
00:45:50 - Ben Myers
So I've now gone for it's 55% opaque in the top right and 95% opaque in the bottom left.
00:46:01 - Anthony Campolo
Do you ever use Notion before?
00:46:03 - Ben Myers
I haven't, but I know that this is something that Chris has been using for the thumbnails.
00:46:09 - Anthony Campolo
Yep. That's correct. Yeah.
00:46:11 - Ben Myers
So at, you know, something roughly close to the dimensions we're looking at, right? Like, here's roughly the kind of color slope. How are you feeling about this?
00:46:22 - Anthony Campolo
Yeah, I think if we can make it a little bit darker because I feel like the lines are still kind of clashing with the text on the front.
00:46:30 - Ben Myers
Yeah. So let's make this... Maybe we'll try 80. Okay.
00:46:40 - Anthony Campolo
Yeah. That's starting to look really good. Yeah.
00:46:43 - Ben Myers
Yeah. And so there's not much of a gradient here. Like, it's very subtle at this point.
00:46:48 - Anthony Campolo
Yeah, it's kind of flat. So could we make the gradient more pronounced?
00:46:52 - Ben Myers
Yeah, we're running into a point where there's not much more we can do than just say I wonder why.
00:47:01 - Anthony Campolo
Why? Can we try a different background image, or what is the limitation in terms of getting the gradient to pop out?
00:47:07 - Ben Myers
Actually, I wonder if I've just got this in the wrong place. I wonder if this needed to come before the—hang on. Let's see.
So yeah, the order you stack your gradients can be very important. And I think this is one of those things that might just have been getting wrong. So let's try this. Okay, so the radial gradient goes on top. There we go.
00:47:37 - Anthony Campolo
Interesting CSS minutia. I'd never be able to figure that out myself.
00:47:42 - Ben Myers
Yeah. So let's see here. We can try our colors again and reevaluate. But what was happening was—okay, yeah, this is making a lot more sense now. I was like, why aren't these colors working?
00:48:00 - Anthony Campolo
Okay.
00:48:02 - Ben Myers
See?
00:48:02 - Anthony Campolo
So yeah.
00:48:03 - Ben Myers
Getting better.
00:48:04 - Anthony Campolo
This looks—yeah. Because this looks more like what you're demonstrating first off with the Dallas background. Does this make sense now?
00:48:10 - Ben Myers
Yes. There we go. Yeah. So, you know, we absolutely.
00:48:17 - Anthony Campolo
Started to look really nice because with that, the text itself pops really hard and the background stuff is barely perceptible. So should we probably bring the background out a little bit more?
00:48:31 - Ben Myers
Do you want to bring the background out a little more?
00:48:33 - Anthony Campolo
Just a tiny bit.
00:48:34 - Ben Myers
Okay, yeah. So let's maybe do—there we go. So 55%. Yeah. Right.
00:48:43 - Anthony Campolo
Yeah. That looks really good. I like that.
00:48:44 - Ben Myers
Yeah. It could be, but this is fast enough. And then, you know, we don't risk losing everything when it refreshes, because I'm just doing browser sync on an HTML page. We don't really have hot reload in the sense of it'll save CSS changes and stuff like that. So.
00:49:08 - Anthony Campolo
At this point, my notes would be, could we make the text in general a little bigger relative to the avatars?
00:49:18 - Ben Myers
Okay. Yes. So you want to up the font size and probably move the avatars around a little would be my guess.
00:49:27 - Anthony Campolo
Yeah, they're kind of off in the corner.
00:49:30 - Ben Myers
So I recently made this hop myself where this was the font size I was working with for a while, and then I just noticed in YouTube thumbnails, this looked really small. And so I recently went from 70 pixels to around 90 pixels or something. And okay, we're already running into some overflow issues, but I want to make sure that we have the right dimensions first. Yeah.
Okay. So we'll need to—let's see how best to do this. 15 characters probably. Maybe.
00:50:10 - Anthony Campolo
And we're getting close to the hour here. So people in the audience have general questions about what is being shown here. If you want other resources or anything like that, now would be a good time to ask that. We'll be closing it out in the next ten minutes or so for sure.
00:50:24 - Ben Myers
Okay. So I'm gonna do—I'll bump up the right margins here.
00:50:31 - Anthony Campolo
Chris has a font suggestion as well once we're finished with this last part that we're doing.
00:50:36 - Ben Myers
Oh I figured out what was—okay. So I had this margin left here, and this was exorbitant. But we can actually probably nuke this all together. There we go.
00:50:49 - Anthony Campolo
So I've heard that you should not hard code pixel values into CSS. Is that an incorrect assumption?
00:50:56 - Ben Myers
Oh, context matters in this case, because our thumbnails are all the same size. And you don't have to worry about people zooming, so do whatever you want.
00:51:07 - Anthony Campolo
Okay. So that goes back to we have full control over how this CSS actually looks at the end of the day. So in that case, hard-coded pixel values are okay because you're looking for very fine-grained control.
00:51:18 - Ben Myers
Right, because we're not looking for people to consume this as a website, you know?
00:51:24 - Anthony Campolo
Just.
00:51:24 - Ben Myers
Yeah, we're just using HTML as a templating engine for our images.
00:51:28 - Anthony Campolo
Cool. Yeah. No, this is a whole different way of thinking about CSS. It's kind of mind-boggling, actually.
00:51:34 - Ben Myers
Yeah. Okay, so there's probably more. We—oh, you know. Yeah. Let's see.
00:51:42 - Anthony Campolo
Yeah. Your card, your avatar is overflowing your title.
00:51:46 - Ben Myers
Yeah. I'm trying to figure out the best way to fix that. And we may just decide to not spend more time worrying about that just in virtue of having time. But let's see. X with maybe 80%. Here we go. Okay. This will do it. Yeah.
So, you know, it's maybe not the prettiest thing in the world.
00:52:12 - Anthony Campolo
I think the title on multiple—this is a thing that happened with the FSJam social cards that we were generating too is making sure that it is on the right amount of lines. So I think that would be cool with the title being on multiple lines, as long as the guest's name is one line.
00:52:29 - Ben Myers
Absolutely. Okay. I want to look at the font that was suggested. And we'll get your input on whether you like it.
00:52:37 - Anthony Campolo
Jakarta-sans Toko Typekit github.io.
00:52:43 - Ben Myers
Okay. This is a pretty cool font. I do like this. I think it's nice and clean. Probably.
00:52:54 - Anthony Campolo
Yeah, it's a free Chris.
00:52:56 - Ben Myers
Uh.
00:52:57 - Anthony Campolo
Chris is like, "Actually, I'm a vendor. I'll be $900."
00:53:01 - Ben Myers
See? Yeah. So, yeah, I'm trying to think. You could absolutely download this and set this up, and you could bundle it with your thumbnail page if you wanted. Or you could just install your font locally and just pull it up specifically on your machine.
I don't know that this would be a good time for doing that. We could also just look at Google fonts for the sake of, you know, time.
00:53:31 - Anthony Campolo
Yeah. Let's just grab a nice-looking font.
00:53:34 - Ben Myers
Do you have a favorite?
00:53:36 - Anthony Campolo
Oh, that's a good question. I like clean and unobtrusive.
00:53:41 - Ben Myers
Yeah. I think what I'm gonna do is sans serif and display fonts.
00:53:49 - Anthony Campolo
I mean, Roboto looks pretty good. That was the very first one.
00:53:53 - Ben Myers
All right. Yeah. I think Roboto might even be variable. Is it not? Looks like it's not.
Yeah, I think since we're coming up on top of the hour, maybe we won't spend the time with the fonts. But you can see how just by experimentation, right, we've been able to get to something we kind of like. And you can tweak this. You can improve it. You can get what you want.
But what I love about starting with social share cards and why I'm so excited for this is it's such a salient scope, right? It's something that anyone who hosts people for their streams—it's something you're going to have to worry about because you need to promote people. You need to promote the streams.
00:54:39 - Anthony Campolo
Good and clean, because you are representing your guest in the way that you present them. And so, like you said, you looked at it as a responsibility. And this is the same way I saw FSJam, which is that you're putting an episode out that this may be the first and possibly only episode this person ever put out in this kind of medium. And so if you don't represent them well, you're putting this out into the historical record to be representing them forever.
So the more time and effort and care you can put into how you're presenting them is just worth so much more than the time you put into it. So I think this is really great. And I'm super happy that you walked me through this. I think this is a very unique solution to this problem that everyone faces.
And yeah, I hope that others will look at this and maybe get inspired to create their own web-standard social share cards, and that we could get people sharing these around the same way you have Show My Chat, which is—next time I'll have you on to create a chat overlay for me whenever you have the time for that.
[00:55:47] And so Show My Chat is the same thing. You create a chat overlay that is based on just web-standard technology and HTML, CSS. And once you create that, you can have other people come in who know this tech and know how to style this way can add their own styles and their own themes, and they can actually build on top of this.
I think it'd be cool to have something similar to what you do with Show My Chat and all these chat styles. Be cool to have social share styles as well.
00:56:16 - Ben Myers
That would be incredibly cool and might have to think about that for a bit. But yeah, so this is—and also, you know, when you get something you like working, it's infinitely reusable.
We took a bit of time struggling with the CSS today, but you're only going to have to do that the one time until you get a layout that you're happy with. And what this means then is you'll have something that's plug and play for all your future streams. It's a way to save a whole lot of time without having to open up a graphics editor.
Because I mentioned Inkscape earlier—it sucks on the Mac. It's such an unperformant hog of resources that I just don't like opening it up on my computer. And I can do things much faster with HTML, and this is HTML that could be version-controlled.
[00:57:08] If you wanted, you could hook this up into your framework of choice. So, you know, maybe you personally don't like manually editing your HTML file, but you could see a system where this could fit into an Eleventy workflow. My setup is actually powered by Eleventy. You could fit this into an Astro workflow or something like that.
00:57:28 - Anthony Campolo
Like so.
00:57:29 - Ben Myers
Fitting.
00:57:30 - Anthony Campolo
Does Eleventy add value for you? You said Eleventy is in your workflow. So based on what we've already shown today, what is it that you would get by adding in Eleventy?
00:57:40 - Ben Myers
Yeah. So let me actually just show you what I've got.
00:57:44 - Anthony Campolo
In the chat.
00:57:45 - Ben Myers
Yes. Hello. It's good to see you. Let me show you something that I've got, because this is kind of fun.
So this is, you know, more or less the same setup, right? We can see we've got our header, we've got our avatars, some styles and whatnot. But then I've actually loaded everything up in my front matter. And so I can say, oh, the host is Ben Myers, the guest is Jim Drury, the timestamp is, the title is—and then when I come down to the avatars bit, I personally—you'll notice that I'm not directly linking any of our avatars, but I'm instead saying, "Hey, there's a host here. Go ahead and process the host and spit out their Cloudinary URL, and then process the guest and spit out their Cloudinary URL."
So this generates using my Eleventy data kind of workflow.
[00:58:40] Actually, where is it? Is it—that's, I don't know, it's interesting.
00:58:47 - Anthony Campolo
Yeah. And it's making me think, do I want to—do you have a repo where I can fork your Eleventy setup?
00:58:58 - Ben Myers
Yes, it would be—yeah. It's GitHub.com/dev/semantics-dev. But this is the full Semantics website, including other things like, you know, all the stream pages and whatnot. So it's kind of this all-encompassing thing that I've been working on.
So what this allows me to do, though—yeah, what this allows me to do is I can pretty quickly—oh, that just opened up in the wrong browser. That's okay. I can come to the thumbnail. It's actually underscore thumbnail now. There we go. You can see that this actually has, you know, Jim.
But if I come back to here and I instead say that the guest was Anthony Campolo, I have a data setup that lets me just quickly grab the avatar I have on file for Anthony. So it updates here and it updates here.
[01:00:04] Kind of a one-stop shop. So that's—again, don't start here. Don't start with this all-encompassing automation, because if you start with an all-encompassing automation, you're going to quickly create your own pain points.
But I've gotten to the point where I know that my social cards are formulaic enough that I can integrate them with my site, which has all the data for all the different guests, because I display those. Let's see. There's, you know, the—yeah. And so it's using the same image and setup that we've got here.
01:00:41 - Anthony Campolo
Yeah. That's the thing that really blows my mind, is that you have your entire deal set up for all the integration points that are all working through this Eleventy data cascade flow. And that's something that only an Eleventy pro like yourself could set up.
But yeah, it's very cool. And I love that you started from the assumption that I want to build everything up with standard web technology. And then as you add other pieces, you add other services, you add other frameworks, you add other static site generators, it's always building on this base of HTML, CSS as the thing that everything spins out from.
01:01:22 - Ben Myers
Absolutely. Yeah. It's just very cool. I think that it's an easy enough workflow that, you know, if you're finding Cloudinary difficult to work with or difficult—if you're struggling getting Cloudinary to work and style things just the way you want it, and you have some HTML and CSS chops, just go to town. Make a website, you know. How would you do this if it were a website?
I know that that's not going to be the solution for everyone. Not everyone feels comfortable with that kind of workflow. But if you are, god damn, does this make things easy.
01:01:57 - Anthony Campolo
It really does. Awesome. Well, thank you so much, Ben, for walking us through all of that. I learned a ton here, and this is stuff that I'm going to incorporate into my stream going forward, so I can start making my own guests look super duper dope, just as you have.
Next week, we're gonna have Ryan Carniato as my second guest. Talk about Solid. I'm gonna have him walk through the bare-bones basic Solid setup for total noobs, because he's done such a great job of explaining Solid to, I think, super uber senior devs. But for us more simple devs who may not necessarily understand everything about fine-grained reactivity, it would be nice to get a very simple 101 on how to use Solid. So that's going to be the goal for our next episode.
But yeah, this concludes the first episode of AJC and the Web Devs. Thank you so much, Ben, for being here, for being the first guest. Definitely let our listeners know where they can find you and where they can follow your own awesome work on the internet.
01:02:58 - Ben Myers
All right. Yeah. Thank you so much for having me. Y'all, if you want to follow me, follow me on Twitter at Ben Myers. I'm trying to get the link for that right now, but I might just have Anthony do it. Follow me on Twitter at Ben Myers. You'll find, mainly, it's accessibility posting there.
You can follow me on Twitch at Antics.Dev, where I have weekly streams where I bring on guests from around web development and web design to teach me something about building great user experiences for the web in a hands-on way, with a focus on accessibility and/or core web technologies. So those are the best places to find me.
You can also find me on various Discords. The ones that I frequent the most are the Dev Discord—that's discord.gg/dev—and the Frontend Horse Discord, which you can find at Frontend Horse. And that's all the best places to find me.
[01:03:51] Come say hi. If you're getting started with streaming, let me know. I want to help. I like helping people get started with their streaming setup.
01:04:03 - Anthony Campolo
Absolutely. Yeah. Ben is one of the best streaming resources out there on the entire internet. I'll say that, full stop. If you want to learn about streaming and he is presenting himself as a resource to you, you would be foolish not to take advantage of that.
So thank you so much, Ben, for being here. This was a ton of fun. I think this will close it out for us. I'm AJCWebDev on all places on the internet, so find me there on Twitter or GitHub or Twitch or anywhere else, or AJCWebDev.com for my blog.
But yeah, that will close it out for us. And thank you everyone who is in the chat and who is hanging out for this first episode. This was far better than I was expecting, so it was really great to have you all here following along with us. It's super duper fun.
01:04:50 - Ben Myers
Bye, y'all.
01:04:51 - Anthony Campolo
Bye.