Transcript

Paul Ford It’s nice, it’s polished, it’s fit and ready for the world, and it is not a catastrophic failure, so Preston’s happy. 

Preston Richey Yeah, very happy [music fades in, plays alone for 18 seconds, ramps down]. 

PF Hey, Rich? 

Rich Ziade Yo! 

PF Let’s talk about a cool Labs project. You know, usually when we are on this show we’re talking about building products for clients cuz we like to market. 

RZ Mm hmm. 

PF And we do that. We go, we sit with you, we’re your product partner, we help you with your strategy and we get you all the way [music fades out] through to the design and build until it’s on the phone. And in big organizations where it takes a lot of change to get something out the door: we’re there with you. That’s us! We’re the best! No, we’re really good, frankly. 

RZ We truly are. 

PF We are! And we work with, you know, if you check out our website you’ll see interesting work we’ve done: postlight.com. But we also do fun stuff inside of Postlight. 

RZ Hmmm! Tell me more! 

PF Well, I don’t need to tell you a damn thing because we have someone here from the org to talk about a small and really fun product that we just shipped: Preston Richey. 

PR Hey guys. 

PF Hey!!! Oh my God, I didn’t see you there! What a surprise! 

RZ Hi Preston. 

PR Hello. 

PF Preston, tell us your—what are you at Postlight? What is your official title? 

PR I’m the Software Engineer, tending towards full stack but yeah, I can—I’m a Software Engineer is what is on my business card. 

PF [Chuckles] Did we give you a business card? 

[1:32]

PR Hah! I don’t even remember. I was—I don’t think I’ve ever given out one, so—

PF They’re probably back at the office. I mean, yeah. 

PR That’s what’s on my Github profile. 

PF Oh God. 

PR Which is probably a better—better indicator. 

PF So, tell us about the thing you built. It’s called textmoji and people, if you wanna follow along as you’re listening to us, you can go to textmoji, t-e-x-t-m-o-j-i dot app [textmoji.app]. Well what does do? 

PR Well, it’s a really simple webpage that helps people make emoji, custom emoji specifically we made this, we’re kind of catering it towards Slack because that’s what we use and what a lot of people use. But, actually, you could use textmoji to make custom emoji for Discord, for, I don’t know, Microsoft Teams. I dunno, there’s probably other things that you could do with it but 200 by 200 pixel PNGs that can say whatever—whatever you want. So, we have a lot of these in our Postlight Slack. We have a lot of like, “Thanks, Paula,” or, “Ok,” or, “Sounds great,” or, “Whatever,” we have a lot of these. 

PF Let’s talk about that communication pattern for one sec [sure] because—So, what happens is Slack is nominally supposed to be for chat type things. Hit return, here are some words. “Oh, a person said some words in a chat, ok, I will say some words back.” But it turns out that actually confirming and saying, “I heard you,” or, “Nice comment!” Or, “That’s funny,” is a disaster. So what happens is that—and many organizations have hit on this pattern individually: people reply with emoji, they reply with little symbols instead. Like, “Ok,” like a thumbs up. And Slack has two ways to do it: you could either reply with emoji inline as if that was like a word you were typing, or you can reply—you can hit the little happy face on the message itself and it’ll put a little emoji and then people can click on it to kind of double up on the sentiment. So, at some level, it lets people kind of add a reaction and then other people can come in and add that reaction too. And that keeps the channel from getting just super noisy. So, we have probably four trillion of those that we have custom created. 

PR It’s, yeah, somewhere in the ballpark of like 1250, I think. At last count it was like one thousand two hundred and seventy-something. 

RZ My God. 

[3:47]

PF No! And there’s one—it’s literally our—the person who runs design, Matt Quintanilla. There’s probably 30 of him in different hats and one where he looks like The Incredible Hulk. 

PR Oh yeah.

PF There’s a number of Incredible Hulk ones, including some that are kind of indirect criticisms of capitalism don’t think we don’t see [Preston and Rich laughing]. And stuff like that but then there’s this one format that shows up a lot which is just a little bit of text in an image form. And it’ll be like, “Thanks!” Or, “Ok!” Or even particularly, like, “Thanks, Preston!” You know, cuz Preston does things to help. Or, “Thanks, Paula!” And that’s where you set off. That’s where you started. 

PR Right. That type of emoji was really kind of what got me thinking about the idea because we have these “Thanks, person-name” that are very useful. You know, we’re lots of people at Postlight who do great things and you want a really easy way of just clickin’ that “Thanks—” You know, “Thanks, Paul” button and, you know, not have 25,000 people, you know, write that in the chat. 

PF There is no, “Thanks, Paul” button, just so everybody knows [others laughing]. The co-founders—

PR We’ll have to fix that.

PF [Laughs] Ok. So I go there and let me—let me describe what I see. So, I go and it says textmoji on the top and I can type in my words and then as I type them in, there’s this nice automatic preview and a set of styles, and so it can look like a Commodore 64 or it can—And it sort of figures out how many letters I’ve got going and sort of fills in the space because we’re dealing with this very rectangle here. 

PR Yeah, it turns out whatever—whatever the thing that you’re building will be seen at, you know 20 pixels by 20 pixels, slightly larger. The size of it actually matters a lot and the contrast of the colors, and there’s a lot that goes into designing a thing that looks good at small scale. So, what we wanted to do with this project is make it easy to make emoji that looked good. I personally am not a designer, I don’t enjoy, you know, thinking about, you know, what font I should choose or, you know, [Rich chuckles] do these two colors work? You know, is the contrast good or bad? There’s so many things that I would rather spend my time thinking about. So, whenever I wanted to make an emoji beforehand, I would have to either bug a designer friend or just kind of muddle through Photoshop and googling and trying to figure things out. So, the purpose of the templates are really to create a good set of emoji that act as a starting point. So, one of the cool things about it is that on the first tab you kind of see the different themes that we’ve kind of preselected but then you can click over to the customize tab which really allows you to play with all of that. You can—there’s a color picker for adding your own custom colors. You can enter in a hex value if you have a brand color, whatever. And then we have an array of fonts and background shapes that hopefully, we really wanted to hit the kind of—there’s a sweet spot of like enough variation that it’s—that not all the emoji look the same but also we didn’t wanna recreate Photoshop, right? We didn’t wanna create a photo editing app that does everything that Photoshop can do cuz why wouldn’t you use Photoshop for a Photoshopped sized problem. The problem was [chuckles] I didn’t wanna open Photoshop and I knew that this could be simpler. And that’s what we tried to do. 

[7:00]

PF And, I mean, there is a certain aesthetic for these that this carries through. Like it’s really wild [right] because I’m like, “Oh yeah, I’ve seen these around. Other Slacks use them.” And so it’s a nice way to automate that and put all the existing textmoji creators out of business. Which is really, you know, what we’re here to do. 

RZ By the way, just a question: how much does it cost to use textmoji? 

PR Oh it’s—[chuckles] It’s [Paul laughing] free, actually. 

RZ You’re kidding?!?

PR Yeah. 

RZ That’s incredibly generous of you and Postlight, Preston. 

PR I know it is. 

PF Wow. What a gift. 

RZ What a gift [Preston laughs]. 

PF Talk through the process a little bit. So, you have this idea and, I mean, actually people don’t know about Labs. How is a Labs project born? 

PR Yeah, so, it’s pretty simple. We have a Google Form that you—that has a very kind of simple set of questions. You know, “What’s your idea?” “Would you like to build it?” Give it an estimate of the size. Just kind of a basic outline of the—you know, the napkin sketch of the idea. And then you submit it and then if it gets picked, then you get a—a group of people to work on it and in this case it was me as the engineer, a designer named Tina who was a product designer, and then we had a little bit of help from product management from Adam Pash and then a little bit of copy from a few other people but yeah, it was a fairly small team and it came together quickly but it went through several iterations of, you know—Once the idea had been selected and it went through design and, you know, we implemented our whole product design process on it. 

[8:36]

PF Tell me about—I know you used a kind of unconventional—First of all, is there any backend at all or is it all frontend?

PR It’s all frontend. 

PF This is fascinating to me. Like, this is a—a sort of mini platform with no—I mean, I’m assuming—hopefully we’ve got Google Analytics on so we know how many people are using [yeah] but it’s really just one webpage. 

RZ It’s kind of the spirit of Labs for us which is constraints, right? Like what can you put—cuz this could be—this could turn into 12 people in four months and using graphics cards but the whole point is what can you pull off and deliver something of value in a very short period of time? 

PF What did you use to build this thing? Like, what’s the stack here? 

PR Yeah, so the stack is pretty simple, it’s just a Svelte app. So, Svelte is a—

PF Hold on. 

RZ Truly is—isn’t it? 

PF Yeah, I know. And I just love [Preston laughs] just like, “Oh it’s a brit-ugh-blrrr-brr-bah-ler, guys.” No, ok. So Svelte. What is Svelte, Preston? 

PR Yeah, so Svelte is a [Rich laughing] Javascript [chuckles] framework. 

PF Oh, a Javascript framework! Ohhhhhh! Ok. 

PR Javascript, yeah. 

PF Explain to me as if I—I know that Javascript is a programming language. 

PR Right. 

PF What is Svelte? 

PR Svelte is basically a framework that sits on top of that. So in the way that like React or Angular or these other things are frameworks that utilize Javascript to help you write your app, Svelte is just another one of those but more than a frontend framework, it’s a compiler if we wanna get a little bit more technical about it. 

[10:04]

PF So Angular and React, like those are really ways—they’re ways to kinda manage a lot of the data that runs around in the background of your app and then they turn it into web components that you can interact [right] with. And so where, you know, maybe paragraphs, maybe stuff, but also like color pickers, and toggle switches, and so on. So, you’d say, “Here’s my data, here are my components, please smush them together,” and that’s your React and your Angular. What is Svelte in comparison? 

PR So, Svelte lives in kind of a similar world to that. You’re still writing components that get rendered to your webpage but being that it’s a compiled language, you—In the way that you would with a static site, you kind of build your app and then at the end of it you’ll run a build process. I think it’s Svelte’s build. And then it kinda dumps out a lot of HTML and Javascript that is then served statically by something like Amazon S3 or Netlifier, whatever. But the cool thing about Svelte is that it’s able to trace the ways that the control flow throughout your app, the way that variables are passed and are mutated and it’s able to make—to write code essentially a lot better than you would, that is fast, and that is small. It gets—it’s really good at tree shaking. So, if you pull in a library that actually ends up only including the bits that you use, whereas—

RZ Hmm!

PR—some other, you know, frameworks may not do that for you. I would say the main takeaway from using Svelte for me honestly was just how nice the developer experience was. I had heard about it. I had seen a few talks by the guy who created it. He talks about it very convincingly. At least enough for me to wanna try it. And so whenever I had the opportunity to learn a new thing, with this Labs project, I wanted to give it a chance. And it was really a—a kind of a—it was a fun thing to do. The learning of the whole framework was easy and fast because the surface area of it is actually pretty small. 

PF Mm hmm. 

PR Whereas things like React you kind of have to, you know, steep yourself in React’s land. You know, you have to kinda shrink the JSX’s, you know, Kool-Aid and you kinda have to get on board with that universe, get on board with all the kind of norms of that. Svelte felt a lot lighter; it felt like you’re kind of just writing native Javascript. There’s no redux, mistake management is actually just mutating variables which is kind of a—a different thing. 

PF Like, we used to program when we were animals. Like animals program [right]. So, that—Svelte will sort of keep an eye on you and keep you out of those pickles or what—

PR Exactly. 

PF Ok. 

[12:39]

PR Yeah, so, and also it’s—there’s a really good data binding stories. So rather than having to, you know, write an input component and then like in React land, you’re very use to writing these boilerplate kind of like setting up a variable to put the input value into and then whenever the input changes, writing the on change handler, and all these things. In Svelte, you actually just write an input and then you can do—use a directive which is kind of like a DOM attribute in Svelte land where you just to bind value and then you pass in your variable and then just write automatically whenever that input changes, the value changes, and you don’t have to worry about like writing the glue. It just kind of like is glued for you. 

PF So really obvious stuff that [yes] you do over and over again. They’re like, “Look, you just want this: when somebody updates a form field, you want it in a variable. I know you. You’re not wanting anything different. So, let’s stop pretending. Let’s not—we know what this is. Let’s not have these games. [Exactly] No more like change event games. It changes, it’s in a variable. It’s here.” Ok. I mean I’m looking at the source code of textmoji as we talk and it’s generated a very clean sort of DOM output with headers and sections and I’m not ashamed of this as I am of many things that I see [Rich laughs]. 

PR Yeah, the output of it is actually one of—you know, a really nice thing. You also—you kind of get to write the app as you want to as a developer, kind of as, you know, you don’t have to worry about like, for example, handle CSS class name collisions for you. So, in a component you can, you know, maybe say you have an H1 element that is red. In normal, kind of not using a framework, you would have to create a CSS class but then because CSS is global, you’d have to make sure that that class is only used in places where you want it to be read which in this example that’s easy but there’s a lot—so much of debugging frontend code is just trying to figure out where the CSS is coming from. Is it, you know, with the box sizing inheritance, like there’s all these things. Svelte actually does this for you. So inside of a component, you don’t even have to worry about classes. You can just write H1 in the script section and then it automatically generates a kind of hash—a unique class name. 

PF Mm hmm. 

PR So, you can have two side by side components, both of them inside of the component define H1 to be a different color which in normal CSS wouldn’t work because they would collide. So one of them would take precedent. But in Svelte land, it just kind of happens automatically. There’s a unique string that’s generated for you and you don’t even have to worry about it. This for me was the biggest takeaway was—just it felt nice to use. It was pleasantly fast and just like everything kind of like worked as I hoped it would, and it really wasn’t anything that I was like missing. 

[15:34]

PF How do you make—so there—words become pictures . . . in this app. 

PF Yes. Yes! 

PF How do you make words into pictures on the web? So that somebody can download them and put them into Slack. 

PF Yeah, this was actually one of the like nice things about [chuckles] this app. And one of the things—Like the biggest questions—one of the biggest questions going into it and one of the ones that were solved earliest. So, after learning that the product had been picked up, like the weekend after that, I was just really excited and I wanted to try and figure out how I would go about doing the thing. So, I ended up settling on a framework called Pixie which essentially just kind of—the drawing framework and it allows you to do things with graphics and render it either to WebGL or to Canvas. So that’s what we’re using here and we render to Canvas and essentially we just draw a text to a Canvas element and then there’s a—the native Canvas element in HTML has a method that you can call to get the data of that as a blob which is kind of like DOM land just a chunk of data. Little bit of—I actually don’t know what a DOM [chuckling] looks like inside. It’s a binary format, I think [mm hmm]. But it’s just your Canvas has data and then you’re able to save that. I used a library that saves—it just literally downloads the blob and saves it as a PNG. It sounds a lot more complicated than it is but the web is actually set up to do these things fairly well. And another thing that—kind of a subtle thing that kind of shows how cool this is is that on textmoji, as you’re clicking around, if you’re able to see the favicon, like the little badge that is [mm hmm] beside the title bar. 

PF The icon for the website. 

PR Right, the icon for the website. As you’re making your textmoji, the favicon actually updates and it is able to update because the favicon understands a data URL. So, the whole time we’re kind of just generating—We have kind of a stringified format of what the canvas should look like. We’re able to save that or read it or do whatever we want with it. 

PF So, when we’re—I mean, this is the thing with browsers now, right? So, when you’re talking about Canvas and WebGL and like a lot of people may not know what those are, a browser is like 20 computers at once. Like it—the number one thing it likes to do is show you text and paragraphs. That’s the easiest thing to learn. And then they go, “Actually, you know what? I wanna be able to draw pictures.” And it’s like, “Ah, well here are some GIFS and JPEGS—” The browser knows what those are. Then they go, “No, what if the pictures were like vector graphics?” And everybody’s like, “Oh cool, SVG. This’ll let me do that.” And then they go, “Well, what if it was actually like an infinite 2D canvas in which I could draw things as if it was like, I dunno, maybe a 16-bit video game or like a multilayered Photoshop.” And then they’re like, “Alright, how about Canvas?” And then they’re like [others chuckle], “Ok, but now: 3D!” And then they go, “Alright, WebGL, Closed Canvas.” 

PR Yup. 

[18:28]

PF So this all shows up and then open source nerds and different companies and so on show up and they’re like, “Yeah, this is way too complicated to just use day to day. Like it’s nice that it’s here. Thank you. It’s cool we can put the pixel there but we need some library or abstraction that can work.” And then usually like one or two of those will take off. Like, they’re’ll just be one where people are like, “Ah, ok.” So Pixie, like Pixie let’s you kinda get in and mess with that stuff, right? In ways that [right] doing it kind of quote by hand would be a real chore. 

PR Yeah. Pixie also has a lot of utilities that I use for, like, the autosizing. [Mm] Like with Canvas, I think it would be really hard to—You have to do a lot of computation yourself to make sure that the text that you’re drawing is of a certain size and you know, keeping the dimensions proper, and there’s all these things that—

PF Fitting the words in the little box! I don’t think people get this, right? You don’t know how wide your letter ‘K’ is . . . when you’re a programmer [exactly]. You have no clue! Like, the computer has to tell you that and it’s like telling it to measure that is nowhere near easy and then if you’re using real fonts where they kind of kern nicely together, it’s not like it’s all the exact same width. Like, you’re just in a world of everything going weird. 

RZ Oh, it’s a whole world! There are like experts who think about that stuff. The typography people can go on and on about this. 

PR Yeah. 

RZ It’s one of those problems like, “Wow, I guess somebody was thinking about this so I don’t have to think about it.” And it does it very nicely. 

PF Alright, soooo, out goes textmoji into the world, one day. What was the hardest part? 

PR The hardest part was probably just thinking about all the different ways that people could use it and kind of settling on a user that we were kind of designing for. So, in this thing, the idea was mine. I wanted it for myself. You know, frankly, that’s [stammers]—I had a use case where I wanted to create emoji—I like making emoji for, you know, for the Postlight Slack. I like contributing to that [chuckles] culture that we have going on. And I didn’t wanna open up Photoshop and I didn’t wanna open up Sketch. I just wanted a web interface to do that. But I realized and we realized [chuckles]—I realize—I would say later on—the product designers were like, “Oh obviously you are not the user. You know, we wanna design for—we wanna make a tool that everyone can use.” And I think I certainly as a developer, as someone who is, you know, very used to using keyboard shortcuts and just like doing all these things. I might make different assumptions about how a website works than someone else might. 

[20:59]

PF Humans are simple, Preston. Humans wanna hit the button. 

PR Oh I don’t—I don’t—yeah. [Others laugh] That’s certainly true but I think the kernel of truth in that is that we wanted to get the quickest path between typing in a box and hitting the button with the results of that being something that people are happy to use. And I think that it took a lot of thinking about what types of emoji will people make? What sort of color schemes? And also, like, the people who use Slack range innumerably. Like, I have no idea how many millions of people use Slack on [sic] this world but IBM uses it, I think. You know small design studios. There are people who would probably be scandalized by some of the [chuckles] some of the emojis that others might make. 

PF Yeah. 

PR But, you know, work cultures differ such that we wanted to make a tool that allowed someone at IBM or someone somewhere else to make a very buttoned up, you know, ok emoji. I’m not sure what sort of emoji they’d be using but we also wanted to make a, you know, a WTF or a cool, cool, cool or like [mm hmm] whatever. Kind of a goofy emoji that, you know, some other—that might fit other—the culture of another place. So we wanted it to have a wide range while also not seeming like it was stressful to use. We didn’t wanna overwhelm people with choices. So we kinda—finding the right balance of that I think was the hardest part for me. 

PF I mean, it is hella easy to use. Once you—

PR Yeah, thank you. 

PF No, no, it is. Good job to the team, right? And once you launched it, what have been some surprises? What’s happened since it’s gone live? 

PR [Chuckling] I would say, honestly, some—the biggest surprise for me is just that it hasn’t failed catastrophically [laughing]—that it hasn’t—that I haven’t been [others laughing], you know, up all night, you know, dealing with random like log or like anything that could go wrong. I think with the tools that we use, with the framework that we used, and just the process that we went through building it, I think we set ourselves up for success and it works pretty well. The underlying idea of it is fairly simple. And the underlying technology is fairly simple as well. It’s just kind of gluing the pieces together and I think that it turned out pretty good. At least I’m happy with it! I’m enjoying using it and if anyone else is too, I’m more than happy to hear that. 

[23:23]

PF That is just such a pure engineer answer, too [Preston laughs]. Just like, “Hey, what’s been the big surprise since you launched this thing and lots of people started using it?” “That it did not catastrophically fail.” That’s good. 

PR Right. 

PF You know, “What’s been the best part of fatherhood?” [All laugh] Alright, so look: people should go visit textmoji.app. It’s fun, it’s light, it’s a little random and weird and good for your day. You know, what’s interesting, Rich, I’m thinking about this talking to you, like, so much goes into the little things, right? 

RZ Yeah! You know, it’s that last mile that you start to have to step out of your own interests and these are the best kinds of projects cuz you know, ‘I wanted it to exist cuz I wanted it’.

PF Mm hmm. 

RZ It’s actually—It is the purest form of product management is the person that just wants the thing but then as soon as you head down that road, you realize, “Ok, wait, is this just for me? Is it really just for me?” [Laughs]

PF Oh!—Look, I think that should be built into the process, right? Like then other people show up and then you decide. I’m gonna make a boss confession and I wanna bring—So, we’ve been working on this on and off for a while, like not forever but like a couple months it’s been sort of in the cue as something people—and mid-pandemic, like there’s a lot going on. So, like a couple weeks ago, it came up and it was close to launch, and I was like, “What the hell is taking so long? What’s happening?” And then it launched and I saw it in that state, and it launched, and I’m gonna be frank, there’s not a huge amount of difference from when I saw it til now but it was all that fit and polish and it takes a minute. And it does. It was weird to be the bo—Usually I’m the advocate on the other side and it was wild to be the person on the other side who’s like, “Oh, come on!” And then to kinda keep my mouth shut cuz I know better. And then to see it come out and go like, “Oh yeah, that’s what they were doing. I get it. Of course. I’m glad they did.” 

RZ Yeah, this is great! textmoji.app. It’s free of charge, like our other Lab projects. It’s also worth noting, we have another project for Slack that we don’t actually—there’s a couple but Dash is one that we use all the time at Postlight. 

PF There’s a link to that on the textmoji page. If you hit it, you can see it on the bottom. Cuz we’re an integrated cross-marketing enterprise [Preston chuckles], dammit. 

RZ [Laughs] Preston, thank you. This was really great. It’s a great project and it was fun to see how you kind [music fades in] of brought it all together. 

[25:38]

PF Yeah, congratulations on shipping it. Good Labs work. 

PR Thanks so much. I’m really happy to be at a place that actually invests in projects like these. I think that there’s a number of other places, you know, that I could’ve just made this thing myself and not brought it to Postlight but I’m sure that the thing that exists now is like, miles and miles and miles better than what I would’ve come up with, and it’s just—it’s fun to have, you know, to build a thing that the stakes are relatively low, it’s just a fun thing to work on. 

RZ Wait! Halt! Hold on. This cost money?

PF Shhhhhh-shh-shh. [Rich laughs] No, no, no. It’s good. It’s good for the soul. We tell—

RZ It is truly good for the soul. 

PF And people actually—there’s structured time that people can take away from efforts to work on something like this themselves. Otherwise, what are we doin’? Otherwise, what are am I—am I doin’ a point of sales system for JCPenney? No! We’re building product. We gotta keep our skills fresh [others chuckling]; gotta engage with the world. This is good. Alright, so, hello@postlight.com if you need us. We also build things for money [music ramps up, plays alone for three seconds, fades out to end].